canvas保存图片到本地

canvas可用来做很多的事情，当我们用canvas来显示一些图标时，又希望能够直接下载这些图片时，我们可以会遇到一些问题。

一、绘制canvas图像

绘制不是这儿的重点，所以就画个简单的图像，直接pass了。

<canvas id="canvas" width="300" height="300"></canvas>

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.moveTo(20,20);
context.lineTo(280,280);
context.moveTo(280,20);
context.lineTo(20,280);
context.stroke();

这样的话，我们可以得到一个’X’的图像了。

二、生成图片

这儿我们就要用到canvas中的toDataURL方法了。

HTMLCanvasElement.toDataURL(type,encoderOptions)

该方法返回一个包含图片展示的?data URI?。可以使用 type（MIME type） 参数其类型，默认为image/png（ PNG?格式）。图片的分辨率为96dpi。encoderOptions是指在图片格式为?image/jpeg 或?image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值?0.92。

其中：

• 返回值是一个String。
• 如果画布的高度或宽度是0，那么会返回字符串“data:,”
• 如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的
• Chrome支持“image/webp”类型

我们可以看下该图片的Base64编码形式的字符串。

var base64Img = canvas.toDataURL();
console.log(base64Img); 
//?data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAQvUlEQ…CIIEBYEVSdiQACIQQIKwSrQxFAIIIAYUVQdSYCCIQQ+D+vgA9pZtPoQAAAAABJRU5ErkJggg==

三、下载图片

平时我们用到的下载都是经过服务器的，现在我们选择使用HTML5中的一个新属性download处理图片下载的问题，ie下的话会有兼容性的问题。

新增一个button元素：

<button id="btn">下载图片</button>

document.getElementById('btn').addEventListener('click',function() {
    var base64Img = canvas.toDataURL();
    var oA = document.createElement('a');
    oA.href = base64Img;
    oA.download = '111.png'; // 下载的文件名可以此处修改
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click',true,false,window,null);
    oA.dispatchEvent(event);
    // 以上三行的模拟触发事件可以用 oA.click();替代
    // 若是触发不了下载，可以尝试将a标签append到body中，当然最后不要忘了把他remove掉。
});

配合上事件点击，我们就可以下载图片了，但是直接下载到下载目录下的。在火狐中，这会弹出下载的对话框。要在chrome下也弹出对应的另存为的框，可以在设置中打开每次下载询问下载路径。

注：目前只在chrome和火狐下有效果。

至于想要其他的图片格式，那么就可以使用前面说到的方法了。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!