3.11 使用data URL加载画布

优质

小牛编辑

127浏览

2023-12-01

要使用data URL加载画布，我们可以扩展上一节的例子，用data URL创建一个image对象，然后使用我们的好朋友drawImage()方法把它绘制到画布上。本节，我们将执行一个简单的Ajax调用，从文本文件中获取data URL，再使用该data URL在画布上绘制图像。当然在现实世界中，你有可能从本地存储，或调用数据服务来获取图像的data URL。

绘制步骤

按照以下步骤，把data URL加载到画布：

1. 定义loadCanvas()函数，该函数接受data URL作为输入，定义画布上下文，使用data URL新建一个image对象，然后，在图像加载完成后，把它绘制到画布上：

function loadCanvas(dataURL){
  var canvas  = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  //  从data URL加载图像
  var imageObj  = new Image();
  imageObj.onload  = function(){
    context.drawImage(this,  0,  0);
  };
  imageObj.src  = dataURL;
}

2. 执行Ajax调用，来获取保存在服务器上的data URL，然后，在收到服务器的响应后，把响应文本作为入参，调用loadCanvas()函数：

window.onload = function(){
  // 执行Ajax调用来获取图像的data URL
  var request  = new XMLHttpRequest(); 
  request.open("GET", "dataURL.txt", true);
  request.onreadystatechange  = function(){
      if  (request.readyState  ==  4)  {
        if  (request.status  ==  200)  {  //成功响应
             loadCanvas(request.responseText);
        }
      }
  };
  request.send(null);
};

3. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

要从Web服务器上获取图像的data URL，我们可以创建一个AJAX调用（Asynchronous JavaScript and XML），来向Web服务器发送请求，并把data URL作为响应。当我们得到值为200的状态码，说明请求和响应都是成功的，我们就可以从request.responseText对象中得到图像的data URL，然后把它传递给loadCanvas()函数。该函数将新建一个image对象，并把它的源设置为data URL，然后，在图像加载完成后，把它绘制到画布上。