HTML5 Canvas实战
3.9 画布绘图转换为data URL
阅读(

路径和文本

图形及组合

处理图像和视频

绘制图像

裁剪图像

拷贝、粘贴画布的某部分

处理视频

获取图像数据

处理像素:图像反色

视频反色

图像颜色改为灰色

画布绘图转换为data URL

除了图像数据,我们也可以提取图像的data URL,data URL实质上是一个很长的文本字符串,该字符串包含对画布图像进行编码后的信息。如果想把画布上的图像保存到本地存储或离线数据库,data URL就非常方便。本节,我们将绘制一个云状图形,获取其data URL,然后把它插入到HTML页面,以便我们能看到它是什么样子。

绘制步骤

按照以下步骤,把画布上的图画转换为data URL:

1. 定义画布上下文,并绘制一个云状图形:

window.onload = function(){
  var canvas  = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  var startX  =  200;
  var startY  =  100;
  //绘制云状图形
  context.beginPath();
  context.moveTo(startX, startY);
  context.bezierCurveTo(startX  -  40, startY  +  20, startX  -  40, startY  +  70, startX  +  60, startY  +  70);
  context.bezierCurveTo(startX  +  80, startY  +  100, startX  +  150, startY  +  100, startX  +  170, startY  +  70);
  context.bezierCurveTo(startX  +  250, startY  +  70, startX  +  250, startY  +  40, startX  +  220, startY  +  20); 
  context.bezierCurveTo(startX  +  260, startY  -  40, startX  +  200, startY  -  50, startX  +  170, startY  -  30); 
  context.bezierCurveTo(startX  +  150, startY  -  75, startX  +  80, startY  -  60, startX  +  80, startY  -  30);
  context.bezierCurveTo(startX  +  30, startY  -  75, startX  -  20, startY  -  60, startX, startY);
  context.closePath();
  context.lineWidth  =  5;
  context.fillStyle  = "#8ED6FF"; 
  context.fill();
  context.strokeStyle  = "#0000ff"; 
  context.stroke();

2. 使用canvas对象的toDataURL()方法,获取画布的data URL数据:

  // 把画布图像保存为data URL(默认为png格式)
  var dataURL  = canvas.toDataURL();

3. 把data URL插入到<p>标签,以便我们能看到它:

  // 把data URL插入到HTML文档,我们就能看到它
  document.getElementById("dataURL").innerHTML  = "<b>dataURL:</ b> "  + dataURL;
};

4. 在HTML文档的body部分嵌入canvas标签,并创建一个<p>标签,用来保存data URL:

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
<p id="dataURL" style="width:600px;word-wrap: break-word;">
</p>

工作原理

本节的关键是toDataURL()方法,它可以把画布上的图画转换为data URL:

var dataURL = canvas.toDataURL();

当运行本例,你将会看到一个很长的data URL,看上去就像这样:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAD6CAYAAAB9LTkQAAAgAElEQVR4Xu3dXbAUxd3H8f+5i09VrEjuDlRFBSvoo1ETD/HmEcQIXskRc6FViaA+N7woRlNJUDQm4kueeiS+INz4wEGfilwocLxSUASvDMf4XokpQbFKuAtYSdWT3PXz/885C3t2Z3dndntme3q+W7UehN2e7k/3sj96enpGhAcCCCCAAAIIIICAV4ERr6VRGAIIIIAAAggggIAQsBgECCCAAAIIIICAZwEClmdQikMAAQQQQAABBAhYjAEEEEAAAQQQQMCzAAHLMyjFIYAAAggggAACBCzGAAIIIIAAAggg4FmAgOUZlOIQQAABBBBAAAECFmMAAQQQQAABBBDwLEDA8gxKcQgggAACCCCAAAGLMYAAAggggAACCHgWIGB5BqU4BBBAAAEEEECAgMUYQAABBBBAAAEEPAsQsDyDUhwCCCCAAAIIIEDAYgwggAACCCCAAAKeBQhYnkEpDgEEEEAAAQQQIGAxBhBAAAEEEEAAAc8CBCzPoBSHAAIIIIAAAggQsBgDCCCAAAIIIICAZwEClmdQikMAAQQQQAABBAhYjAEEEEAAAQQQQMCzAAHLMyjFIYAAAggggAACBCzGAAIIIIAAAggg4FmAgOUZlOIQQAABBBBAAAECFmMAAQQQQAABBBDwLEDA8gxKcQgggAACCCCAAAGLMYAAAggggAACCHgWIGB5BqU4BBBAAAEEEECAgMUYQAABBBBAAAEEPAsQsDyDUhwCCCCAAAIIIEDAYgwggAACCCCAAAKeBQhYnkEpDgEEEEAAAQQQIGAxBhBAAAEEEEAAAc8CBCzPoBSHAAIIIIAAAggQsBgDCCCAAAIIIICAZwEClmdQikMAAQQQQAABBAhYjAEEEEAAAQQQQMCzAAHLMyj

你在这里所看到的,只是一个完整data URL的一个很小的片段。需要注意的最重要部分,是data URL的最开始部分,以data:image/png;base64开头。它的意思是说,该data URL是一幅由base 64编码表示的PNG图像。

与图像数据不同,它是一个本地的像素数组,而data URL比较特别,因为它是一个字符串,该字符串可以保存在本地存储中,也可以被传给Web服务器,保存在离线数据库中。换句话说,图像数据对检查和处理图像的每个单独像素非常有用,而data URL的目的在于保存数据,并在客户端和服务器间传递数据。

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验