<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<img id="scream" width="100" />
<button id="a">切</button>
<button id="move">移动</button>
button id="dd">重绘</button>
var c=document.getElementById("myCanvas");//画布
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.src = "gg.jpg";
document.getElementById('a').addEventListener('click',function(){
ctx.drawImage(img,134,372,100,83,0,0,200,183);//图片，图片裁切开始坐标，裁切图片长宽，绘制坐标，绘制大小（可以放大和缩小图片）
})
document.getElementById('move').addEventListener('click',function(){
ctx.translate(0, 10);//画布位置移动
ctx.rotate(Math.PI / 180 * 15);//旋转
})
document.getElementById('dd').addEventListener('click',function(){
var imageData = ctx.getImageData(0,0,200,183),//参数为坐标，大小；获取的是坐标0,0，长200，宽183的图片信息
data = imageData.data;//图片色值信息，分别为rbga
console.log(imageData)
for (var i = 0; i < data.length; i += 4) {//对rgba进行骚操作
var r = data[i],
g = data[i + 1],
b = data[i + 2],
a= data[i+3];
// 色值在250-256之间都认为是白色
if ([r, g, b].every(v => v < 256 && v > 250)) {
data[i + 3] = 0; // 把白色改成透明的
}
}
ctx.putImageData(imageData, 0, 0);//重新绘画
})
canvas可以将画布保存成图片链接，图片链接可以用于标签或者下载。
canvas.toDataURL('image/png')
默认转换成的格式是png。
canvas.toDataURL('image/jpeg', quality)
也可以是别的图片格式。quality是图片品质，数值是0~1。0是最差的品质，1是最佳的品质。
也可以生成二进制对象：
canvas.toBlob(callback, type, encoderOptions)
详解传送门 https://www.cnblogs.com/-867259206/p/7448270.html
抠图传送门http://www.imweb.io/topic/59f5c4c0b72024f03c7f49bd
下载传送门 https://www.cnblogs.com/zhangkaiqiang/p/8183926.html