HTML5 Canvas实战
3.11 使用data URL加载画布
阅读(

路径和文本

图形及组合

处理图像和视频

绘制图像

裁剪图像

拷贝、粘贴画布的某部分

处理视频

获取图像数据

处理像素:图像反色

视频反色

图像颜色改为灰色

画布绘图转换为data URL

画布绘图另存为图像

使用data URL加载画布

要使用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,然后,在图像加载完成后,把它绘制到画布上。

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验