Bad*_*dal 5 html javascript html5-canvas
我正在使用以下代码绘制画布并使用 toDataUrl 将其保存为 png 图像。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
window.onload = function(images) {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sources = {
darthVader: "http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc6/228564_449431448422343_1996991887_n.jpg",
yoda: "http://a4.sphotos.ak.fbcdn.net/hphotos-ak-snc7/427489_449423165089838_503188418_n.jpg"
};
loadImages(sources, function(images) {
context.drawImage(images.darthVader, 250, 30, 250, 250);
context.drawImage(images.yoda, 530, 30, 250, 250);
});
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById("canvasImg").src = dataURL;
};
</script>
</head>
<body>
<canvas id="myCanvas" width="850" height="315"></canvas>
<img id="canvasImg" alt="Right click to save me!">
</body>
</html>
但我的 png 图像显示为空白图像。我只看到一个空白的白色图像。我搜索了这个，但一无所获。我正在使用 php 和 chrome 浏览器。这里有什么问题？
您首先进行调用，然后在调用loadImages后立即获取数据 URL 。但是，正如您的实现所示，调用它只是启动加载过程；当所有图像都已加载（这是未来的某个时间）时，将调用回调。loadImages loadImages
目前您得到的是空白图像，因为图像尚未加载，因此您的回调尚未调用，因此您的画布仍然是空的。
简而言之，所有依赖于已加载图像的内容（例如您的预期toDataURL结果）都应该在这些图像实际加载时执行 - 因此在回调中。
loadImages(sources, function(images) {
context.drawImage(images.darthVader, 250, 30, 250, 250);
context.drawImage(images.yoda, 530, 30, 250, 250);
var dataURL = canvas.toDataURL();
document.getElementById("canvasImg").src = dataURL;
});