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