将画布保存到图像文件

你可以使用方法 canvas.toDataURL() 将画布保存到图像文件，该方法返回画布图像数据的数据 URI 。

该方法可以采用两个可选参数 canvas.toDataURL(type, encoderOptions)：type 是图像格式（如果省略则默认为 image/png）; encoderOptions 是介于 0 和 1 之间的数字，表示图像质量（默认值为 0.92）。

在这里，我们绘制一个画布并将画布的数据 URI 附加到“Download to myImage.jpg”链接。

HTML

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<p></p>
<a id="download" download="myImage.jpg" href="" onclick="download_img(this);">Download to myImage.jpg</a>

使用 Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox / 2, oy / 2, ox, oy);

download_img = function(el) {
  // get image URI from canvas object
  var imageURI = canvas.toDataURL("image/jpg");
  el.href = imageURI;
};

JSfiddle 的现场演示 。