使用canvas 下载图片- toDataURL()

摘要：

主要思想是借助Canvas自己的API - toDataURL()来实现，整个实现。运行效果如下

http://57xue.com/DemoHtml/CanvasDownLoadPic.html

首先是在我们的html中需要有一个Canvas的元素啦，然后在Canvas中添加图片。其次就是将Canvas中的图片下载到本地来。

1、在html中创建一个canvas的元素

 <canvas id="myCanvas" style="display:none" width="510px" height="510px"></canvas>

2、对这个canvas载入图片

var can = document.getElementById('myCanvas');
var ctx = can.getContext('2d');
var imgA = new Image();
//图片地址
imgA.src = '/Maker/QRCodeShow';
imgA.onload = function() {
            ctx.drawImage(imgA,0,0);
            ctx.restore(); 
}

在上面的这段js代码中我们创建了一个Image对象然后给定它的src在把这个Image渲染到我们的canvas画布中。

3、将canvas中的图片下载下来。

在上面的js代码中我们在渲染完的canvas读取出来（注意如果这个渲染的图片为跨出了这个域的图片则没法读取toDataURL()会失效的。）

 imgA.onload = function() {
            ctx.drawImage(imgA,0,0);
            ctx.restore();            
            can1 = document.getElementById('myCanvas');
            dataURL = can1.toDataURL('image/png');
        };

最后下载图片。

function down() {
            dataURL = dataURL.replace("image/png", "image/octet-stream");
            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = dataURL;
            save_link.download = "XXXX.png";
            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);
        }