当前位置: 首页 > 文档资料 > HTML5 Canvas 实战 >

3.11 使用data URL加载画布

优质
小牛编辑
126浏览
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,然后,在图像加载完成后,把它绘制到画布上。