画布canvas实现电子签名

最新推荐文章于 2024-04-26 22:29:03 发布

Keylg

最新推荐文章于 2024-04-26 22:29:03 发布

阅读量433

点赞数 1

文章标签： canva可画 html5 前端

本文链接：https://blog.csdn.net/2302_76741306/article/details/131673885

版权

画布canvas实现电子签名

在开发银行或者设计签合同的项目中经常使用到电子签名，那么我将分享怎么用canvas实现电子签名并进行导出。

1.首先建立一个canvas画布，并设置宽高后会在浏览器得到一个画布
html和css部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  *{
    padding: 0;
    margin: 0;
  }  
  #mcv{
   
    margin: 100px auto 0 auto;
    border: 1px solid black;
    display: block;
  }
</style>
<body>
    <canvas width="800px" height="400px" id="mcv"></canvas>
</body>
</html>

浏览器显示：
在这里插入图片描述

2.js设置画布属性

//获取元素
const mcv=document.querySelector("#mcv")

//canvas绘制图像（通过脚本，通常是Js）,canvas元素本身没有绘制能力仅仅是图形容 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
const ctx=mcv.getContext("2d")

//设置绘画区域背景色 
 ctx.fillStyle='#F6F6F6'
 
//设置绘画的位置以及大小（我的是在画布的左上角0，0点开始，大小同画布一样）
ctx.fillRect(0,0,mcv.width,mcv.height)
//设置绘画线条粗细以及相交时线条样式
 ctx.lineWidth = 2
 ctx.lineJoin = 'round'

//开始绘制
 mcv.onmousedown = function (ev) {
        
        //线条颜色
        ctx.strokeStyle="#000000"
        //起点
        ctx.beginPath()
        //设置线条跟随鼠标位置
        let sx=ev.clientX-mcv.offsetLeft
        let sy=ev.clientY-mcv.offsetTop
        ctx.moveTo(sx, sy)
        mcv.onmousemove = function (e) {
            let x=e.clientX-mcv.offsetLeft
            let y=e.clientY-mcv.offsetTop
            ctx.lineTo(x, y)
            //绘制结束
            ctx.stroke()
        }     
    }
    //设置鼠标离开画布和鼠标松开手终止绘制，不然容易出现绘制问题
    mcv.onmouseup = function () {
        mcv.onmousemove = null
    }
    mcv.onmouseleave = function () {
        mcv.onmousemove = null
    }

到这个步骤已经可以进行绘制了，接下来要将其导出成图片，我们在页面加一个按钮
在这里插入图片描述

<style>
    * {
        padding: 0;
        margin: 0;
    }

    #mcv {
        border: 1px black solid;
        margin: 100px auto 0 auto;
        display: block;
    }

    div{
        text-align: center;
    }
</style>
 <canvas width="800px" height="400px" id="mcv"></canvas>
    <div>
        <button onclick="fn()">导出 </button>
    </div>

导出fn函数js部分

//HTMLCanvasElement.toBlob() 方法创造 Blob 对象，用以展示 canvas 上的图片；这个图片文件可以被缓存或保存到本地（由用户代理自行决定）。
//可以在调用时指定所需的文件格式和图像质量，若未指定文件格式（或不支持指定的文件格式），则默认导出 image/png 类型。浏览器需要支持 image/png，大多数浏览器还支持额外的图片格式，包括 image/jpeg 和 image/webp。
function fn(){
        mcv.toBlob(function(bolb){
        //创造img
            const img=document.createElement("img")
        解构出地址
        const dz=  URL.createObjectURL(bolb)
     //创造链接
        const link=document.createElement("a")
        link.href=dz
        
        link.download='签名'
        //自己执行点击下载
        link.click() 
        //销毁地址
        URL.revokeObjectURL(dz)
        })
    }

可以下载啦
在这里插入图片描述

最终代码

<!DOCTYPE html>
<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>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    #mcv {
        border: 1px black solid;
        margin: 100px auto 0 auto;
        display: block;
    }

    div{
        text-align: center;
    }
</style>

<body>
    <canvas width="800px" height="400px" id="mcv"></canvas>
    <div>
        <button onclick="fb()">确定</button>
    </div>
</body>
<script>
    const mcv = document.querySelector("#mcv")
    const ctx = mcv.getContext("2d")
    ctx.fillStyle='#F6F6F6'
    ctx.fillRect(0,0,mcv.width,mcv.height)
    ctx.lineWidth = 2
    ctx.lineJoin = 'round'
    mcv.onmousedown = function (ev) {
        ctx.strokeStyle="#000000"
        ctx.beginPath()
       let sx=ev.clientX-mcv.offsetLeft
       let sy=ev.clientY-mcv.offsetTop
        ctx.moveTo(sx, sy)
        mcv.onmousemove = function (e) {
            let x=e.clientX-mcv.offsetLeft
            let y=e.clientY-mcv.offsetTop
            ctx.lineTo(x, y)
            ctx.stroke()
        }
           
    }
    mcv.onmouseup = function () {
        mcv.onmousemove = null
    }
    mcv.onmouseleave = function () {
        mcv.onmousemove = null
    }
    function  fn(){
        mcv.toBlob(function(bolb){
           const img=document.createElement("img")
           const dz=  URL.createObjectURL(bolb)
        const link=document.createElement("a")
        link.href=dz
        link.download='签名'
        link.click() 
        URL.revokeObjectURL(dz)
        })
    }
</script>

</html>