canvas图片下载保存到本地

canvas标签是可以右键保存的
但是这样还是不够友好
如果点击按钮下载，那就最好不过了

思路

1. a标签可以下载资源的
   2.只要把canvas转成base64的格式放在href里就好了

于是
download是下载的文件名

  <a href="" download="test" id="download">下载</a>
<script>
    var dataURL = canvas.toDataURL("image/png");
    var a = document.getElementById("download");
    a.setAttribute("href",dataURL);
</script>

完美成功

方法2
上面的方法，很方便。但是不够高大上
1.由button触发事件 创建一个a标签
2.a标签 绑定事件流，触发点击事件

<button onclick="download()">下载</button>
<script>
  var saveFile = function(data, filename){
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;
       
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    }
    function download(){
        var dataURL = canvas.toDataURL("image/png");
        saveFile(dataURL,'test.jpg');
    }
</script>