Canvas 移动端用户签字确认功能,同意后保存照片直接转base64

移动端开发时拿到一个【用户签字确认功能】的需求,我这边使用的 Canvas 来记录用户的写字轨迹,达到储存签字照片的功能。
以下是下来参照这个需求做的一个简单demo,希望能够对大家有所帮助~~~~~~~~
在这里插入图片描述
HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../css/global.css">
    <title>Document</title>
</head>

<body>
    <div id="canvas">
        <p id='tip'>请签字确认:</p>
        <p id="clearCanvas">重写</p>
        <p id="saveCanvas">签字同意</p>
    </div>
</body>
<script type="text/javascript" src="../lib/jquery.1.11.3.min.js"></script>
<script type="text/javascript">
    window.onload = function() {
        new lineCanvas({
            el: document.getElementById("canvas"), //绘制canvas的父级div
            clearBtn: document.getElementById("clearCanvas"), //清除按钮
            saveBtn: document.getElementById("saveCanvas"), //保存按钮
            //linewidth:1,//线条粗细,选填
            //color:"black",//线条颜色,选填
            //background:"#ffffff"//线条背景,选填
        });
    };
    function lineCanvas(obj) {
        this.linewidth = 1;
        this.color = "#000000";
        this.background = "#ffffff";
        for (var i in obj) {
            this[i] = obj[i];
        };
        this.canvas = document.createElement("canvas"); //创建 canvas 标签
        this.el.appendChild(this.canvas); //将 canvas 标签添加到 body 中去
        this.cxt = this.canvas.getContext("2d");
        this.canvas.width = this.el.clientWidth;
        this.canvas.height = this.el.clientHeight;
        this.cxt.fillStyle = this.background; //设置图形的填充颜色
        this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width); //绘制一个填充的矩形(默认填充色黑色)
        this.cxt.strokeStyle = this.color; //设置图形轮廓的颜色
        this.cxt.lineWidth = this.linewidth; //设置线的粗细,默认为1,即往上0.5,往下0.5
        this.cxt.lineCap = "round";
        //开始绘制
        this.canvas.addEventListener("touchstart", function(e) {
            this.cxt.beginPath(); //ctx.beginPath()清空以前的路径
            this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); //ctx.moveTo(50,50)移到路径起始点
        }.bind(this), false);
        //绘制中
        this.canvas.addEventListener("touchmove", function(e) {
            this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); // ctx.lineTo(50,100)第一条路径
            this.cxt.stroke(); // stroke() 画出路径
        }.bind(this), false);
        //结束绘制
        this.canvas.addEventListener("touchend", function() {
            this.cxt.closePath(); // closePath() 合并路径
        }.bind(this), false);
        //清除画布
        this.clearBtn.addEventListener("click", function() {
            this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); //clearRect(x,y,width,height)清除指定矩形区域,本质让指定区域完全透明,但不包括边框
        }.bind(this), false);
        //保存图片,直接转base64
        this.saveBtn.addEventListener("click", function() {
            var imgBase64 = this.canvas.toDataURL();
            console.log(imgBase64);
        }.bind(this), false);
    };
</script>
</html>

CSS:

		body,
        html {
            width: 100%;
            height: 100%;
        }
        #canvas {
            width: 100%;
            height: 100%;
            /* background-color: #eeeeee; */
            position: relative;
        }
        #canvas canvas {
            display: block;
        }
        #tip {
            position: absolute;
            font-size: 0.4rem;
            font-weight: bolder;
            color: #969494;
            top: 0.5rem;
            left: 0.5rem;
        }
        #clearCanvas {
            width: 50%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            border: 1px solid #DEDEDE;
            z-index: 1;
            font-size: 0.28rem;
        }
        #saveCanvas {
            width: 50%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            position: absolute;
            background-color: #4894e1;
            color: #ffffff;
            font-size: 0.28rem;
            bottom: 0;
            right: 0;
            border: 1px solid #DEDEDE;
            z-index: 1;
        }

更多canvas属性可以参考 点击这里学习Canvas标签讲解

发布了7 篇原创文章 · 获赞 0 · 访问量 64
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览