在JavaScript函数中加载图像 [英] load image inside JavaScript function

问题描述

我有函数获取图像像素的颜色

  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; 
} 
  

但它返回未定义（它打印第二个console.log首先）
有什么问题？

thx。

解决方案

c> undefined ，因为 load 是异步的。 getImage 尝试在加载之前返回某些内容。

getImage ：

<$ p $您需要传递一个回调以便在映像加载时执行p> function getImage（imgsrc，callback）{
var 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）{
 //在这里使用imageMap; 
}; 
 
 getImage（http：//some.src.jpg，myCallback）; 
  

i have function to get image pixels color

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;
}

but it return undefined(it print 2nd console.log first) what's wrong?

thx.

解决方案

Your function is returning undefined because load is asynchronous. getImage is trying to return something before load finished loading.

You'll need to pass a callback to execute when the image has loaded, to 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)
    });
}

Then you just call the function like this:

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

Of course, you can also define the callback elsewhere:

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

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

这篇关于在JavaScript函数中加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！