HTML5 Canvas实战
3.10 画布绘图另存为图像
阅读(

路径和文本

图形及组合

处理图像和视频

绘制图像

裁剪图像

拷贝、粘贴画布的某部分

处理视频

获取图像数据

处理像素:图像反色

视频反色

图像颜色改为灰色

画布绘图转换为data URL

画布绘图另存为图像

除了把画布绘图保存到本地存储或离线数据库,我们也可以使用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服务器发送请求),用户就可以在图像上右击,把它保存到本地计算机。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验