H5使用canvas画图，并保存到本地

背景

• 自己使用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);
}

demo：

http://jsfiddle.net/V6ufG/2017/