javascript - canvas 上下文 getImageData() 函数不会执行，可能是因为它是在图像加载之前执行的

Question

我想做的是仅使用 javascript 将图像绘制到 html Canvas 上，并通过使用 getImageData() 函数，我尝试获取图像的位，然后以多种方式操作它们。

但是，因为我使用 javascript 加载图像，所以我怀疑图像无法在调用 getImageData() 之前及时加载，因此程序在进行调用时停止工作，就像您可以的那样看到 _log(3) 语句没有被调用。

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

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

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

这是 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

请尝试一下。这有效。但是，由于域不同，存在跨域违规。您可能需要通过服务器代理它。 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>