canvas context getImageData() 函数不会执行，可能是因为它在图像加载之前执行

Question

我想做的是仅使用 javascript 将图像绘制到 html canvas，并通过使用 getImageData() 函数，我正在尝试获取图像的位，然后以多种方式对其进行操作。

但是，因为我正在使用 javascript 加载图像，我怀疑图像无法在调用 getImageData() 之前及时加载，所以程序在调用时停止工作已创建，如您所见，未调用 _log(3) 语句。

即使我在图像 onload() 事件中调用了 getImageData() 函数，也会发生这种情况。

我已经在其他一些 Whosebug 线程中看到了关于此问题的一些建议，但其中 none 似乎对我有用。

任何正确方向的帮助将不胜感激。

这是 jsfiddle：https://jsfiddle.net/houqdfx9/2/

这是 html:

<p id="log"></p>

这是 javascript:

function _log(string){
    document.getElementById("log").innerHTML += string; 
}

function _createCanvas(){
  var canvas = document.createElement("canvas");
  canvas.setAttribute("id", "canvas");
  document.body.appendChild(canvas);
  return canvas;
}

function _drawAndProcessImage(img, ctx){
    ctx.drawImage(img, 0, 0);
    _log(img.width + " " + img.height + " ");
    var img_data = ctx.getImageData(0,0,img.width,img.height);
    _log(3);

    /* DO THINGS WITH THE IMG_DATA HERE */
}

function setCanvasAndLoadImage(url, canvas, callback) {
   var img = new Image;
   var ctx = canvas.getContext("2d"); 
   img.onload = function(){callback(img, ctx);};
   img.src = url;
   canvas.width = img.naturalWidth;
   canvas.height = img.naturalHeight;
};

var canvas = _createCanvas();

setCanvasAndLoadImage("https://pixabay.com/static/uploads/photo/2014/02/01/17/30/apple-256267_960_720.jpg", canvas, _drawAndProcessImage);

Answer 1

我觉得问题出在台词上

canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;

您要求提供图片尺寸，但图片尚未加载。您必须将其移至图片的 onload 事件。

Answer 2

请试试这个。 这行得通。但是，由于域不同，存在跨域违规。您可能需要通过服务器代理它。 See 这是一个解决方案。

function _log(string){
    document.getElementById("log").innerHTML += string; 
}

function _createCanvas(){
  var canvas = document.createElement("canvas");
  canvas.setAttribute("id", "canvas");
  document.body.appendChild(canvas);
  return canvas;
}

function _drawAndProcessImage(img, ctx){
    ctx.drawImage(img, 0, 0);
    _log(img.width + " " + img.height + " ");
    var img_data = ctx.getImageData(0,0,img.width,img.height);
    _log(3);

    /* DO THINGS WITH THE IMG_DATA HERE */
}

function setCanvasAndLoadImage(url, canvas, callback) {
   var img = new Image;
   var ctx = canvas.getContext("2d"); 
   img.onload = function() {
     canvas.width = img.naturalWidth;
     canvas.height = img.naturalHeight;

     callback(img, ctx);
   };
   img.src = url;
};

var canvas = _createCanvas();

setCanvasAndLoadImage("https://pixabay.com/static/uploads/photo/2014/02/01/17/30/apple-256267_960_720.jpg", canvas, _drawAndProcessImage);

<p id="log"></p>

canvas context getImageData() 函数不会执行，可能是因为它在图像加载之前执行

canvas context getImageData() function won't execute, probably because it's executed before the image is loaded

javascript

html

canvas

getimagedata