![](/img/trans.png)
[英]Canvas getImageData and putImageData load image partially
[英]Javascript: Correct way to load image to canvas for getImageData?
我为html5-canvas写了一个简单的无库rotozoomer,我想知道在使用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。 可能不是正确的方法? 在此先感谢您的反馈和解决方案。
你应该放
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
函数
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.