[英]html5 canvas toDataURL returns blank image
我正在使用以下代码绘制画布并使用 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
,然后在loadImages
调用之后loadImages
获取数据 URL。 但是,正如您的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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.