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

最新推荐文章于 2023-07-27 11:00:29 发布

红色的苏里南苦樱桃

最新推荐文章于 2023-07-27 11:00:29 发布

阅读量545

点赞数

分类专栏： CSS HTML 文章标签： canvas css html javascript

本文链接：https://blog.csdn.net/weixin_44962808/article/details/104009292

版权

CSS 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

移动端开发时拿到一个【用户签字确认功能】的需求，我这边使用的 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">
	let clafn;
    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"//线条背景，选填
        });
        clafn;
    };
    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";
        //先清除画布，疑问？？？？？？
        clafn = this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); 		//clearRect(x,y,width,height)清除指定矩形区域，本质让指定区域完全透明，但不包括边框
        //开始绘制
        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标签讲解
确认后验证canvas是否为空
js代码：

//验证canvas画布内容是否为空的函数
function isCanvasBlank(canvas) {
	//创建一个新的canvas对象
    var blank = document.createElement('canvas');
    blank.width = canvas.width;
    blank.height = canvas.height;
    //与小提琴相同的功能
    //blank.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);

     //一个是白色背景，另一个是透明的
     //var ctxw = blank.getContext("2d");
     //ctxw.fillStyle = "#ffffff";
     //ctxw.fillRect(0, 0, blank.width, blank.height);
    return canvas.toDataURL() == blank.toDataURL();//比较Boolean值，返回true则为空
}
//调用
function checkEmpty() {
	// 获取HTML中的canvas对象
    var c=document.getElementById("canvas");
    if(isCanvasBlank(c)){
        console.log("请签名后再上传！");
        return;
    }
});

红色的苏里南苦樱桃

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Canvas 移动端用户签字确认功能，同意后保存照片直接转base64

移动端开发时拿到一个【用户签字确认功能】的需求，我这边使用的 Canvas 来记录用户的写字轨迹，达到储存签字照片的功能。以下是下来参照这个需求做的一个简单demo，希望能够对大家有所帮助~~~~~~~~HTML：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <...
复制链接

扫一扫