javascript html5 canvas toDataURL 返回空白图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12005049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5 canvas toDataURL returns blank image
提问by Badal
i am using following code to draw canvas and save it as png image using toDataUrl.
我正在使用以下代码绘制画布并使用 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>
But my png image is shown as blank image. i see only a blank white image. i searched for this but found nothing on this. i am using php and chrome browser. what is wrong here?
但我的 png 图像显示为空白图像。我只看到一个空白的白色图像。我搜索了这个，但一无所获。我正在使用 php 和 chrome 浏览器。这里有什么问题？
采纳答案by pimvdb
You are first calling loadImages, then getting the data URL right after that loadImagescall. However, as your loadImagesimplementation shows, calling it merely starts the loading process; the callback is called when all images have been loaded, which is some time in the future.
你第一次调用loadImages，那么之后获取数据URLloadImages呼叫。但是，正如您的loadImages实现所示，调用它只会启动加载过程；当所有图像都加载完毕后调用回调，这是在未来的某个时间。
Currently you're getting a blank image because the images have not been loaded yet, so your callback is not called yet, and as a result your canvas is still empty.
目前你得到一个空白图像，因为图像尚未加载，所以你的回调还没有被调用，因此你的画布仍然是空的。
In short, everything that relies on the images having being loaded (e.g. your expected toDataURLresult) should be executed when those images are actually loaded - thus in the callback.
简而言之，所有依赖于正在加载的图像（例如您的预期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;
});
