將畫布儲存到影象檔案

你可以使用方法 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 的現場演示 。