0

我为 html5-canvas 编写了一个简单的无库旋转缩放器，我想知道在使用 getImageData 之前让图像加载到画布的正确方法是什么？

var hc = document.getElementById("hiddenCanvas"); var hctx = hc.getContext("2d"); // Hidden canvas for imageload (hctx)
var imageObj = new Image(); imageObj.onload = function() { hctx.drawImage(this, 0, 0); }; imageObj.src = 'img/8.jpg';

alert("Click to start");
// This alert needs to be replaced with "hold-the-script-until-image-is-fully-loaded" or the image_data will be nothing but black.

var image_data = hctx.getImageData(0,0,1000,1000);
var rgba_byte_array = image_data.data; // image_data.data.length = 4000000
var loop = setInterval(loop,1000/30);

function loop()
{ ...

该代码适用于警报，因为它会导致加载图像所需的“中断”。我不想使用 JQuery 或 Ajax。

在这里，我直接在画布上绘图时使用 imageObj.onload。可能不是正确的方法？提前感谢您的反馈和解决方案。

4

1 回答 1

0

你应该把

var image_data = hctx.getImageData(0,0,1000,1000);
var rgba_byte_array = image_data.data; // image_data.data.length = 4000000
var loop = setInterval(loop,1000/30);

内部imageObj.onload函数

于 2014-02-23T18:02:24.327 回答