canvas签名面板

最新推荐文章于 2023-10-10 20:11:32 发布

菇凉我谈情不说爱

最新推荐文章于 2023-10-10 20:11:32 发布

阅读量297

点赞数

分类专栏： Java功能开发

本文链接：https://blog.csdn.net/haijun1993/article/details/103253739

版权

Java功能开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas签名</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        #canvas{
            width: 100%;
            height: 90%;
            position: relative;
        }
        #btn{
            width: 100%;
            height: 10%;
            position: relative;
        }
        #btn,#canvas canvas{
            display: block;
        }
        #clearCanvas{
            width: 40%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 1;
            border: 1px solid #DEDEDE;
            z-index: 1;
        }
        #saveCanvas{
            width: 40%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            position: absolute;
            bottom: 0;
            right: 0;
            border: 1px solid #DEDEDE;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div id="canvas"></div>
    <div id="btn">
        <p id="clearCanvas">清除</p>
        <p id="saveCanvas">保存</p>
    </div>
</body>
<script>
    //用于判断是否签名
    var isDraw = false;
    window.onload = function() {
        new lineCanvas({
            el: document.getElementById("canvas"),//绘制canvas的父级div
            clearEl: document.getElementById("clearCanvas"),//清除按钮
            saveEl: document.getElementById("saveCanvas"),//保存按钮
            linewidth:3,//线条粗细，选填
            color:"#000000",//线条颜色，选填
            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");
        this.el.appendChild(this.canvas);
        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.height);
        this.cxt.strokeStyle = this.color;
        this.cxt.lineWidth = this.linewidth;
        this.cxt.lineCap = "round";
        //开始绘制
        this.canvas.addEventListener("touchstart", function(e) {
            this.cxt.beginPath();
            this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
        }.bind(this), false);
        //绘制中
        this.canvas.addEventListener("touchmove", function(e) {
            this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
            this.cxt.stroke();
        }.bind(this), false);
        //结束绘制
        this.canvas.addEventListener("touchend", function() {
            this.cxt.closePath();
            isDraw = true;
        }.bind(this), false);
        
        //清除画布
        this.clearEl.addEventListener("click", function() {
            this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
            isDraw = false;
        }.bind(this), false);
        //保存图片，直接转base64
        this.saveEl.addEventListener("click", function() {
            var imgBase64 = this.canvas.toDataURL();
            if(isDraw){
                downloadFile('myname.png', imgBase64);
            }else{
                alert('请先在画板上签字');
            }
        }.bind(this), false);
    };

    //下载
    function downloadFile(fileName, content) {
        let aLink = document.createElement('a');
        let blob = this.base64ToBlob(content);
        let evt = document.createEvent("HTMLEvents");
        //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        evt.initEvent("click", true, true);
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
        aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
    }

    //base64转blob
    function base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
    }
</script>
</html>

菇凉我谈情不说爱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas签名面板

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
复制链接

扫一扫

专栏目录