canvas標簽是可以右鍵保存的
但是這樣還是不夠友好
如果點擊按鈕下載，那就最好不過了

思路

1. a標簽可以下載資源的
   2.只要把canvas轉(zhuǎn)成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觸發(fā)事件 創(chuàng)建一個a標簽
2.a標簽 綁定事件流，觸發(fā)點擊事件

<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>