canvas保存图片到本地

2017年03月10日Web前端0

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, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    oA.dispatchEvent(event);
    // 以上三行的模拟触发事件可以用 oA.click();替代
    // 若是触发不了下载，可以尝试将a标签append到body中，当然最后不要忘了把他remove掉。
});

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

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

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

HTML5JavaScript

目录