背景
- 自己使用h5 canvas生成海报，可是画好之后不知如何下载，如此刚需竟然没有特别好的解决方案
- 查看网上方案，生成一个a下载链接是相对比较好的方案
- 自己去MDN官方文档查看，发现新大陆，特此分享出来
难点：
- 使用原生canvas画图
- 把canvas保存到本地
思路
- 第一步：把canvas画好的结果转换为一个链接
- 第二步：通过a的download属性进行图片下载
官方文档：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
代码示例
const downLoadCanvas = function() {
var link = document.createElement('a');
link.innerHTML = 'download image';
link.addEventListener('click', function(ev) {
link.href = canvas.toDataURL();
link.download = "mypainting.png";
}, false);
document.body.appendChild(link);
}
网友评论