Question

我有获取图像像素颜色的功能

function getImage(imgsrc){
    var img = $( "<img>", {
        src: imgsrc
    });
    var imageMap = new Object();
    img.load(function() {
        var canvas = $('<canvas/>')[0].getContext('2d');
        canvas.width = this.width;
        canvas.height = this.height;
        canvas.drawImage(this, 0, 0, this.width, this.height);
        for(var i = 0;i < this.width;i++){
            imageMap[i] = new Object();
            for(var j = 0;j < this.width;j++){
                var pixelData = canvas.getImageData(i, j, 1, 1).data;
                imageMap[i][j] = rgbToHex(pixelData[0],pixelData[1],pixelData[2]);
            }
        }
            console.log(imageMap[40][40]);
    });
    console.log(imageMap[40][40]);
    return imageMap;
}

但它返回undefined（首先打印2nd console.log）怎么了？

THX。

Answer 1

您的函数正在返回undefined，因为load是异步的。 getImage试图在load完成加载之前返回一些内容。

您需要将图片加载后的回调传递给getImage：

function getImage(imgsrc, callback){
    var img = $( "<img>", {
        src: imgsrc
    });
    var imageMap = new Object();
    img.load(function() {
        var canvas = $('<canvas/>')[0].getContext('2d');
        canvas.width = this.width;
        canvas.height = this.height;
        canvas.drawImage(this, 0, 0, this.width, this.height);
        for(var i = 0;i < this.width;i++){
            imageMap[i] = new Object();
            for(var j = 0;j < this.width;j++){
                var pixelData = canvas.getImageData(i, j, 1, 1).data;
                imageMap[i][j] = rgbToHex(pixelData[0],pixelData[1],pixelData[2]);
            }
        }
        console.log(imageMap[40][40]);
        callback(imageMap)
    });
}

然后你只需要调用这个函数：

getImage("http://some.src.jpg", function(imageMap){
    // Do stuff with imageMap here;
});

当然，您也可以在其他地方定义回调：

var myCallback = function(imageMap){
    // Do stuff with imageMap here;
};

getImage("http://some.src.jpg", myCallback);

Answer 2

现在承诺开始得到广泛的支持，你可以这样做：

＆＃13;

// define a common load function:
function loadImage(url) {
  return new Promise(function(resolve, reject) {
    var img = new Image;
    img.onload = function() {resolve(this)};
    img.onerror = img.onabort = function(){reject("Error loading image")};
    img.src = url;
  })
}

// usage:
loadImage("http://i.imgur.com/AwlbpGJ.gif").then(function(image) {

  // use the image here
  document.body.appendChild(image);
  
})

＆＃13;

承诺将在内部采取回调，状态等。 IE将在下一个版本中得到支持（它存在polyfill）。

Answer 3

jQuery.load()是异步的，这意味着代码将在工作结束时继续。

如果你想处理imagemap，一个选项可能是传递一个回调你执行imagemap填充的回调，类似于：

function yourCallback(imageMap){
// ...process imageMap;
}

function getImage(imgsrc, yourCallback) {
    var img = $("<img>", {
        src: imgsrc
    });
    var imageMap = new Object();
    img.load(function () {
        var canvas = $('<canvas/>')[0].getContext('2d');
        canvas.width = this.width;
        canvas.height = this.height;
        canvas.drawImage(this, 0, 0, this.width, this.height);

        for (var i = 0; i < this.width; i++) {
            imageMap[i] = new Object();
            for (var j = 0; j < this.width; j++) {
                var pixelData = canvas.getImageData(i, j, 1, 1).data;
                imageMap[i][j] = rgbToHex(pixelData[0], pixelData[1], pixelData[2]);
            }
        }

        yourCallback(imageMap);
    });
}

getImage(imgsrc,yourCallback);

在JavaScript函数中加载图像

3 个答案: