3.10 画布绘图另存为图像

除了把画布绘图保存到本地存储或离线数据库，我们也可以使用data URL把画布绘图保存为图像，以便用户再把它保存到本地计算机。本节，我们将获取画布绘图的data URL，再把它设置为image对象的源，以便用户可以右击，作为PNG图像进行下载。

绘制步骤

按照以下步骤，把画布绘图另存为图像：

1. 定义画布上下文，并绘制一幅云状图形：

window.onload = function(){
  var canvas  = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  //绘制云状图形
  context.beginPath();  //自定义形状开始
  context.moveTo(170,  80);
  context.bezierCurveTo(130,  100,  130,  150,  230,  150);
  context.bezierCurveTo(250,  180,  320,  180,  340,  150); 
  context.bezierCurveTo(420,  150,  420,  120,  390,  100); 
  context.bezierCurveTo(430,  40,  370,  30,  340,  50);
  context.bezierCurveTo(320,  5,  250,  20,  250,  50);
  context.bezierCurveTo(200,  5,  150,  20,  170,  80); 
  context.closePath();  //自定义形状完成 
  context.lineWidth  =  5;
  context.fillStyle  = "#8ED6FF"; 
  context.fill();
  context.strokeStyle  = "#0000ff";
  context.stroke();

2. 获取data URL：

  // 画布图像另存为data URL数据（默认为png格式）
  var dataURL  = canvas.toDataURL();

3. 把图像标签的源设置为data URL，以便用户可以下载它：

  // 把canvasImg的src设置为dataURL，因此可以被另存为图像
  document.getElementById("canvasImg").src  = dataURL;
};

4. 在HTML文档的body部分嵌入<canvas>标签，并增加一个<img>标签，用来容纳画布绘图：

<canvas id="myCanvas" width="578" height="200">
</canvas>
<p>
Image:
</p>
<img id="canvasImg" alt="Right click to save me!">

工作原理

在画布上画了一些东西之后，调用toDataURL()方法得到画布绘图的data URL，再把image对象的src属性设置为该data URL，就可以创建一个用户可以保存的图像。图像加载完成后（这几乎是瞬间完成，因为图像是直接被加载，不必向Web服务器发送请求），用户就可以在图像上右击，把它保存到本地计算机。