在JavaScript函数中加载图像

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

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

函数getImage（imgsrc）{ var img=$（“'）[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 但它返回未定义（它首先打印第二个console.log） 怎么了

---

thx.

您的函数正在返回

未定义的
，因为
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)
    });
}

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

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

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

是异步的，这意味着代码将在停止工作时继续

如果要处理
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);

函数回调（imageMap）{
//…处理图像映射；
}
函数getImage（imgsrc，yourCallback）{
var img=$（“'）[0].getContext（'2d'）；
canvas.width=this.width；
canvas.height=this.height；
canvas.drawImage（this，0，0，this.width，this.height）；
对于（var i=0；i
既然promises开始获得[广泛]支持，您可以改为：


//定义一个公共加载函数：
函数loadImage（url）{
返回新承诺（功能（解决、拒绝）{
var img=新图像；
img.onload=function（）{resolve（this）}；
img.onerror=img.onabort=function（）{reject（“加载图像时出错”）}；
img.src=url；
})
}
//用法：
加载图像（“https://i.stack.imgur.com/ynBVu.gif）然后（函数（图像）{
//在这里使用'image'
document.body.appendChild（图像）；
})
这是因为
加载是异步的。您不能通过异步调用
返回
。这是目前最准确的答案，因为所有当前浏览器都是如此。
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);