canvas导出图片方法总结

1.直接调用canvas对象的toDataURL方法转化为指定类型

var newImg = new Image();
newImg.src=canvas.toDataURL("image/png"));

2.利用canvas对象的toBlob方法

​​https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob​​

先通过​​toBlob​​将canvas对象转化为二进制对象，通过参数形式传入函数

然后利用​​URL.createObjectURL​​方法根据传入的参数创建一个指向该参数blob对象的url,然后把url赋给img的src属性即可

canvas.toBlob && canvas.toBlob(function(blob) {
　　var url = URL.createObjectURL(blob);
　　var newImg = new Image();
　　newImg.onload = function() {
　　　 URL.revokeObjectURL(url)
　　};
　　newImg.src=url;
};

URL.revokeObjectURL()方法会​​销毁​​一个通过URL.createObjectURL()创建的对象URL。

当你要把url赋给newImg之后，并且浏览器已经onload成功这个img，那么此时就再不需要指向blob对象的url，这个时候就应该把这个对象销毁掉，避免占用内存。

箴言：因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。