3.9 画布绘图转换为data URL

优质

小牛编辑

128浏览

2023-12-01

除了图像数据，我们也可以提取图像的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的目的在于保存数据，并在客户端和服务器间传递数据。