canvas(2) -- h5实现在线签名

最新推荐文章于 2024-05-22 16:14:07 发布

Tansy_big_rabbit

最新推荐文章于 2024-05-22 16:14:07 发布

阅读量1.6k

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/tansy_big_rabbit/article/details/104653881

版权

canvas 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

最终实现效果如图，在画布区域可以随意绘画，实现清空画布、保存图片路径、图片转二进制文件

实现手绘的思路：

mouseStart、mouseMove、moveEnd三个事件监听

mouseMove的事件中产生的各个点连成线

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<style>
#tutorial{
border: 1px solid
}
</style>
</head>
<body>
<canvas id="tutorial" width="450" height="450"></canvas>
<div>
	<button onclick="clearCanvas()">清空</button>
	<button onclick="saveCanvas()">保存</button>
	<button onclick="saveAsFile()">图片转文件</button>
</div>
</body>
<script type="text/javascript">
//let events = ["mousedown","mousemove","mouseup"];
let canvas = null;
let ctx;
window.onload = function(){
canvas = document.getElementById("tutorial");
if(canvas){
ctx = canvas.getContext("2d");
//设置画笔属性
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';//线段两端圆滑
    ctx.lineJoin = 'round';//两条线条相交时，创建圆形边角
    ctx.strokeStyle = "#000";//线条颜色
    ctx.shadowBlur = 1;//阴影的模糊级数
    ctx.shadowColor = "#000";//阴影的颜色
//canvas元素添加鼠标按下时的监听事件
    canvas.addEventListener("mousedown",startHandler);
}else{
//alert(“您的浏览器不支持canvas标签，请升级或更换浏览器”);
}
}

function startHandler(){
//开始一条新路径，这一步很重要否则所有的点都会连线
ctx.beginPath();
//鼠标按下时就定义另外两个监听事件
canvas.addEventListener("mousemove",moveHandler);

document.body.addEventListener("mouseup",endHandler);
}

function moveHandler(e){
let position = canvas.getBoundingClientRect();//获取canvas的大小及其相对于视口的位置
let x = e.clientX - position.left;//这样才能获得触发点在canvas画布上的坐标
let y = e.clientY - position.top;
ctx.lineTo(x,y);//如果当前只有一个点，lineTo也会绘制出一个点
ctx.stroke();//描边
}

function endHandler(){
//移除另外两个事件监听
document.body.removeEventListener("mouseup",endHandler);
canvas.removeEventListener("mousemove",moveHandler);
}
</script>
</html>

画布清除

ctx.clearRect(0, 0, 450, 450);

生成图片

let dataurl = canvas.toDataURL('image/png');
console.log(dataurl);

dataurl是base64字符串，下面说一下将base64位的图转换为文件

调用 saveAsFile（dataurl,"test.png"）;

function saveAsFile(dataurl, filename) {
//将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
      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});

    }