关于img.onload的问题

先看看我的代码

getMainColor: function(imgUrl){
        var mainColor = '191,0,0';
        var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "html:canvas");
        var canvas = canvas.getContext('2d');
        var logoImg = new Image();
        logoImg.onload = function() {
            logoImg.onload = null;
            try {
                var notColorList = new Array('0,0,0', '255,255,255');
                canvas.width = logoImg.width;
                canvas.height = logoImg.height;
                canvas.drawImage(logoImg, 0, 0, logoImg.width, logoImg.height);
                var imageData = canvas.getImageData(parseInt(logoImg.width / 3), parseInt(logoImg.height / 2), 1, 1).data;
                var imageDataRgba = imageData[0] + ',' + imageData[1] + ',' + imageData[2];
                if (notColorList.indexOf(imageDataRgba) > -1 || Luger.isWhite(imageData[0], imageData[1], imageData[2])) {
                    imageData = canvas.getImageData(parseInt(logoImg.width / 2), parseInt(logoImg.height / 2), 1, 1).data;
                    imageDataRgba = imageData[0] + ',' + imageData[1] + ',' + imageData[2]
                }
                if (notColorList.indexOf(imageDataRgba) == -1 && !Luger.isWhite(imageData[0], imageData[1], imageData[2])) {
                    mainColor = imageDataRgba
                }
                return mainColor;
            } catch (err) {}  // css('borderBottomColor', 'rgba(' + mainColor + ',.6)')
        };
        logoImg.src = imgUrl;
    },

我这是想返回mainColor 但是这么返回什么也得不到,如果放到onload外面,里面的还没执行就返回了,返回的是默认值,我想等onload执行完获取值后再返回请问怎么做。谢谢

没完全看懂你的意思。

如果你是想要在让getMainColor返回mainColor的结果的话,死了这条心吧。JavaScript里的onload只能是异步的,当加载完成后调用你的onload回调函数。JavaScript是实现不了真正的blocking wait的。

也就是说,按照比较JavaScript的写法,你的getMainColor应该也写成异步的而非同步的,接受一个回调函数,然后当取到图片并且计算出mainColor之后getMainColor会去call那个回调函数。

你可以参见
http://stackoverflow.com/questions/5010288/how-to-make-a-function-wait-until-a-callback-has-been-called-using-node-js

  • 如何学sea.js,knockout.js,node.js,npm.js等???
  • 小幅修改后 setAttribute 在 IE10 上竟不能正常工作
  • js 数组匹配对象并赋值
  • angularjs父子scope之间的通信问题
  • JS调用OC方法,调转不同url,方法不执行
  • 想要用Ajax 即时返回XML 中的数据,前后端怎么选择?
  • JS怎么获取变量名称(反射)
  • angular中的$routeParams和$route.current.params $rootElement都是什么东西?
  • react-router侦听url变化的原理?
  • webpack + react 运行是报错 求解
  • ajax无法动态加入图片