js将canvas生成图片并保存到本地_js canvas生成图片并保存

需求

将 canvas 生成图片并保存到本地

方案

使用 Canvas 的 toDataURL() 方法

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

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

语法
canvas.toDataURL(type, encoderOptions);
参数

• type（可选）：图片格式，默认为 image/png
• encoderOptions （可选）：在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

返回值
包含 data URI 的DOMString。

// canvas 为canvas的dom节点
// name 为生成图片的名字
function downLoadImage(canvas,name) {
  var a = document.createElement("a");
  a.href = canvas.toDataURL();
  // download 属性定义了下载链接的地址
  a.download = name;
  a.click();
}
1
2
3
4
5
6
7
8
9