H5手写签名

zow
已于 2022-07-16 20:41:48 修改
阅读量1k
点赞数
分类专栏：小方法文章标签： html css javascript
于 2022-03-31 11:43:16 首次发布
本文链接：https://blog.csdn.net/lenkty/article/details/123867984
版权
小方法专栏收录该内容
13 篇文章 0 订阅
订阅专栏
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #canvans{
            width: 100%;
            height: 100%;
            position: relative;
        }
        #canvas canvas{
            display: block;
        }
        button{
            width: 50%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            
            border: 1px solid #DEDEDE;
            z-index: 1;
        }
        #clear{
            position: absolute;
            bottom: 0;
            left: 0;
        }
        #sure{
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div id="canvans">
        <button id="clear">清空</button>
        <button id="sure">确定</button>
    <canvas width="414" height="896"></canvas></div>
    <script>
        window.onload = function(){
            new drawImage({
                el:document.getElementById('canvans'), //绘制canvas的父级div
                clearClick:document.getElementById('clear'), //清除按钮
                saveClick:document.getElementById('sure')  //保存按钮
            })
        }
        //绘制签名
        function drawImage(obj){
            this.linewidth = 1;
            this.color = "#000000";
            this.background = "#ffffff";
            for(let i in obj){
                this[i]=obj[i]
            }
            this.canvans = document.createElement('canvas')
            this.el.appendChild(this.canvans)
            this.ctx=this.canvans.getContext('2d')  //创建画布
            this.canvans.width=this.el.clientWidth  //画布宽度
            this.canvans.height=this.el.clientHeight
            this.ctx.fillStyle=this.background    //画布背景色填充
            this.ctx.fillRect(0,0,this.canvans.width,this.canvans.height)  //绘制被填充的矩形
            this.ctx.strokeStyle=this.color      //画笔颜色
            this.ctx.lineWidth=this.lineHeight   //线条宽度
            this.ctx.lineCap = 'round'       //设置或返回结束端点样式
            //base64转blob
            let base64Img2Blob=function(code){
                var parts = code.split(';base64,');
                var contentType = parts[0].split(':')[1];
                var raw = window.atob(parts[1]);
                var rawLength = raw.length;
 
                var uInt8Array = new Uint8Array(rawLength);
 
                for (var i = 0; i < rawLength; ++i) {
                  uInt8Array[i] = raw.charCodeAt(i);
                }
                console.log(new Blob([uInt8Array], {type: contentType}));
                return new Blob([uInt8Array], {type: contentType});
            }
    //pc监听
            this.canvans.addEventListener('mousedown',function(e){
                //起始一条路径
                this.ctx.beginPath()
                //把路径移动到画布指定点，不创建线条
                this.ctx.moveTo(e.pageX,e.pageY)
                this.mouseShow=true
            }.bind(this),false)
            this.canvans.addEventListener('mousemove',function(e){
                e.preventDefault();
                if (!this.mouseShow) return
                // 添加一个新点，然后在画布中创建从该点到最后指定点的线条
                this.ctx.lineTo(e.pageX,e.pageY)
                // 绘制已定义的路径
                this.ctx.stroke()
            }.bind(this),false)
            this.canvans.addEventListener('mouseup',function(e){
                //创建从当前点回到起始点的路径
                this.ctx.closePath()
                this.mouseShow=false
            }.bind(this),false)

    //移动监听
            //开始绘制
            this.canvans.addEventListener('touchstart',function(e){
                //起始一条路径
                this.ctx.beginPath()
                //把路径移动到画布指定点，不创建线条
                this.ctx.moveTo(e.changedTouches[0].pageX,e.changedTouches[0].pageY)

            }.bind(this),false)
            //绘制中
            this.canvans.addEventListener('touchmove',function(e){
                // 添加一个新点，然后在画布中创建从该点到最后指定点的线条
                this.ctx.lineTo(e.changedTouches[0].pageX,e.changedTouches[0].pageY)
                // 绘制已定义的路径
                this.ctx.stroke()
            }.bind(this),false)
            //结束绘制
            this.canvans.addEventListener('touchend',function(e){
                //创建从当前点回到起始点的路径
                this.ctx.closePath()
            }.bind(this),false)
            //清除画布
            this.clearClick.addEventListener('click',function(){
                this.ctx.clearRect(0,0,this.canvans.width,this.canvans.height)
            }.bind(this),false)
            //保存图片，直接转base64
            this.saveClick.addEventListener('click',function(){
                var dataImg = this.canvans.toDataURL('image/png')
                var a = document.createElement('a')
            //转blob下载
                var blob= base64Img2Blob(dataImg)
                var evt = document.createEvent("HTMLEvents");
                evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错
                a.download ='签名' // 设定下载名称
                a.href= URL.createObjectURL(blob);
                a.dispatchEvent(evt);
                a.click()
            //base64下载
                // a.href = dataImg // 将画布内的信息导出为png图片数据
                // a.download ='签名' // 设定下载名称
                // a.click() // 
            }.bind(this),false)
        }
    </script>

</body></html>
效果如下：