canvas 转成图片
将 canvas 转成图片，需要用到以下属性：
toDataURL
canvas.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。
const image = new Image()
// canvas.toDataURL 返回的是一串Base64编码的URL
image.src = canvas.toDataURL("image/png")
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: #ccc;
}
#oc{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:200px auto;
background: white;
}
.span{
display: inline-block;
width: 100px;
height: 50px;
background: #fff;
line-height: 50px;
text-align: center;
margin: 193px 0 0 200px;
cursor: pointer;
}
</style>
</head>
<body>
<canvas id="oc" width="500" height="500"></canvas>
<span class="span" onclick="reset()">重置</span>
</body>
<script type="text/javascript">
// 获取canvas节点
let testNode = document.getElementById("oc");
window.onload = function(){
// 判断是否支持
if(testNode.getContext){
var ctx = testNode.getContext("2d")
testNode.onmousedown = function(ev){
var ev = ev || event;
ctx.beginPath();
ctx.moveTo(ev.clientX - this.offsetLeft,ev.clientY - this.offsetTop);
if(testNode.setCapture){
testNode.setCapture(); // 对鼠标进行捕获
}
document.onmousemove = function(ev){
var ev = ev || event;
ctx.lineTo(ev.clientX - testNode.offsetLeft,ev.clientY - testNode.offsetTop); // 绘制线条
ctx.stroke() // 绘制路劲
// console.log(ev.clientX - testNode.offsetLeft,ev.clientY - testNode.offsetTop)
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup=null;
if(document.releaseCapture){
document.releaseCapture(); // 释放对鼠标的捕获
}
}
// 禁止事件的默认行为 处理拖拽在主流浏览器内的兼容问题
return false;
}
}
}
// 重置
function reset() {
testNode.getContext("2d").clearRect(0, 0, testNode.width, testNode.height); // 清空画布
}
</script>
</html>
