使用Canvas实现网页鼠标签名效果

最新推荐文章于 2023-06-08 15:27:08 发布

霍先生的虚拟宇宙网络

最新推荐文章于 2023-06-08 15:27:08 发布

阅读量660

点赞数

分类专栏：前端文章标签： html 前端 servlet canvas签名

本文链接：https://blog.csdn.net/u010919083/article/details/126055988

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了如何使用HTML5的Canvas元素来创建一个电子签名预览和保存功能。用户可以通过鼠标在Canvas上绘制签名，选择线条粗细和颜色，并能清除签名或者保存为PNG图片。代码中还包含了上传签名图片到服务器的逻辑，以及根据ID获取并显示已有签名的逻辑。

摘要由CSDN通过智能技术生成

电脑签名效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>签名</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #canvas {
            border: 1px solid black;
        }

    </style>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./data/sensor.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <fieldset class="layui-elem-field" style="width: 610px; margin-left: 5px;">
        <legend style="font-size: 12px;">预览</legend>
        <div class="layui-field-box">
            <div class="imgs" id="imgs">
              <img id="imgOld" src="" style="height: 50px; width: 200px;"/>
            </div>
          </div>
    </fieldset>
    <canvas id="canvas" width="610px"  height="280px" style="margin-left: 5px;" ></canvas>
    <div>
        <button id="clear">清空签名</button>
        线条粗细
        <select id="selWidth">
            <option value="2">2</option>
            <option value="4">4</option>
            <option value="6">6</option>
            <option value="9">9</option>
        </select>
        线条颜色
        <select id="selColor">
            <option value="red">red</option>
            <option value="blue">blue</option>
            <option value="pink">pink</option>
            <option value="orange">orange</option>
        </select>
        <button id="imgInfo">保存签名</button>
    </div>

<!--    <div class="imgs" id="imgs"></div>-->
</div>

</body>
<script type="text/javascript">
    //1.获取canvas
    var myCanvas = document.getElementById("canvas");
    //获取2d对象
    var ctx = myCanvas.getContext("2d");
    //清空画布
    var clear = document.getElementById("clear");
    //线条
    var selWidth = document.getElementById("selWidth");
    // 颜色
    var selColor = document.getElementById("selColor");
    // 保存签名
    var imgInfo = document.getElementById("imgInfo");
    // 保存的盒子
    var imgs = document.getElementById("imgs");
    //控制线条是否画
    var isMouseMove = false;
    //线条位置
    var lastX, lastY;

    var widthVal = selWidth[0].value, colorVal = selColor[0].value;
    window.onload = function () {
        initCanvas();
    };
    //初始化
    function initCanvas() {
        //PC端
        var down = (e) => {
            isMouseMove = true;
            drawLine(
                event.pageX - myCanvas.offsetLeft,
                event.pageY - myCanvas.offsetTop,
                false
            );
        };
        let move = (e) => {
            if (isMouseMove) {
                drawLine(
                    event.pageX - myCanvas.offsetLeft,
                    event.pageY - myCanvas.offsetTop,
                    true
                );
            }
        };
        let up = (e) => {
            isMouseMove = false;
        };
        let leave = (e) => {
            isMouseMove = false;
        };
        myCanvas.addEventListener("mousedown", down);
        myCanvas.addEventListener("mousemove", move);
        myCanvas.addEventListener("mouseup", up);
        myCanvas.addEventListener("mouseleave", leave);
    }
    //画线
    function drawLine(x, y, isT) {
        if (isT) {
            ctx.beginPath();
            ctx.lineWidth = widthVal; //设置线宽状态
            ctx.strokeStyle = colorVal; //设置线的颜色状态
            ctx.lineCap = 'round'
            ctx.lineJoin = "round";
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(x, y);
            ctx.stroke();
            ctx.closePath();
        }
        // 每次移动都要更新坐标位置
        lastX = x;
        lastY = y;
    }

    //清空画图
    function clearCanvas() {
        imgs.innerHTML = ""
        ctx.beginPath();
        ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
        ctx.closePath(); //可加入，可不加入
    }
    //线条粗细
    function lineCrude() {
        let activeIndex = selWidth.selectedIndex;
        widthVal = selWidth[activeIndex].value;
    }
    //改变颜色
    function setColor() {
        let activeIndex = selColor.selectedIndex;
        colorVal = selColor[activeIndex].value;
    }
    //保存图片
    function saveImgInfo() {
        var images = myCanvas.toDataURL('image/png');
        imgs.innerHTML = `<img id="image1" src='${images}'>`
        uploadAutograph();
    }
    clear.addEventListener("click", clearCanvas);
    selWidth.addEventListener("change", lineCrude);
    selColor.addEventListener("change", setColor);
    imgInfo.addEventListener("click", saveImgInfo);
    function dataURLtoFile(dataurl, filename) {

        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);

        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }

        return new File([u8arr], filename, {type:mime});
    }
    //上传签名
    function uploadAutograph(imgData) {
        let formData = new FormData();

        let imagesName=new Date().getUTCMinutes()+".png";
        let fileData=document.getElementById('image1');
        let fileOfBlob=dataURLtoFile(fileData.src,imagesName);

        formData.append("file",fileOfBlob);
        let url=sensorServer.getUploadFileUrl1();
        $.ajax({
            url:url,
            type:"post",
            data:formData,
            processData:false,
            contentType:false,
            success:function(data){
                console.log(JSON.stringify(data));
                if(data.msg=="操作成功"&&data.data!=null){
                    let uploadSuccessData=data.data;

                    if(uploadSuccessData!=null) {
                        let fileName=imagesName ; //;document.getElementById('file_1').files[0].name;
                        let serverUrl=uploadSuccessData.url;
                        let params={"fileUrl":serverUrl,"fileName":fileName};
                        let parm={"id":curInfo.id,"autographAttachmentId":uploadSuccessData.attachmentId};
                        let result=sensorServer.updateAccount(parm);//上传保存数据逻辑
                        if(result==1)
                        {
                            layer.alert("上传成功！", {
                                    icon: 6
                                },
                                function () {
                                    //关闭当前frame
                                    xadmin.close();

                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                        } else
                        {
                            layer.alert("上传失败！", {
                                    icon: 6
                                },
                                function () {
                                    //关闭当前frame
                                    xadmin.close();

                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                        }
                    }else{
                        layer.msg("保存失败！");
                    }
                }else{
                    alert(JSON.stringify(data));
                    layer.msg("上传失败！");
                }
            },
            error:function(e){
                alert("错误！！");
            }
        });
    }

    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    var curInfo;

    $(function () {
        let pid = getQueryVariable("id");
        var  accountInfo = sensorServer.getAccountInfoById({"id": parseInt(pid)});
        curInfo=accountInfo;
        if(curInfo.autographAttachmentUrl!=null&&curInfo.autographAttachmentUrl!=""){
            $("#imgOld")[0].src=curInfo.autographAttachmentUrl;
        }
    });
</script>
</html>