canvas

<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