Javascript：将图像加载到getImageData的正确方式？

我为html5-canvas编写了一个简单的无库rotozoomer，我想知道在使用getImageData之前让图像加载到canvas的正确方法是什么？Javascript：将图像加载到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直接在画布上绘图。可能不是正确的方式？在此先感谢您的反馈和解决方案。

来源

2014-02-23 user3342004

显然我不是一个js专家，但是你要考虑使用'toDataURL（）'来获取Base64表示？ –

正如本文所解释：http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript –

你应该把

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-23 18:02:24

谢谢你，那是干的。尽管如此，我不得不删除每个'var' – user3342004

如果此答案对您有用，则通常会通过单击复选标记将答案标记为已接受。 –

Javascript：将图像加载到getImageData的正确方式？

回答

相关问题