html5canvas绘图空白,html5 canvas toDataURL返回空白图像

我使用以下代码绘制画布并使用toDataUrl将其保存为png图像。html5 canvas toDataURL返回空白图像

body {

margin: 0px;

padding: 0px;

}

#myCanvas {

border: 1px solid #9C9898;

}

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;

};

但我的PNG图像显示为空白图像。我只看到一张空白的图像。 我搜索了这个，但没有发现任何东西。 我使用php和chrome浏览器。 这里有什么问题？

2012-08-17

Badal

+0

的可能的复制[HTML5画布toDataURL返回空白(http://stackoverflow.com/questions/31193418/html5-canvas-todataurl-returns-blank) –

2016-12-01 11:48:08