Question

我所拥有的是一个基于jQuery的小脚本，用于灰度图像。

它有效，但我选择会触发它的事件有一个大问题。我需要它只是在加载图像时自动触发。现在，这个：

imgObj.ready

在IE浏览器中完美运行，在Firefox中每次刷新都是赌博，在Safari / Chrome / Opera中根本没有。

然而：

imgObj.click

在所有浏览器中都很棒，但我需要它自动发生，而不需要点击。（或者使用模拟点击，但我没有成功，任何人都知道如何？）

最后这个：

imgObj.load

工作“太好” - 它适用于所有浏览器，但不断重复执行该功能 - 我尝试将一个变量放在一个函数中，使其只执行一次，但它不起作用，。 load继续重新执行。

对于这篇长篇文章感到抱歉，非常感谢阅读 - 下面是完整的代码。

    var imgObj = $('#image'); 

        imgObj.click(function(){

            var imgObj = document.getElementById('image');

            if($.browser.msie){
                grayscaleImageIE(imgObj);
            } else {
                imgObj.src = grayscaleImage(imgObj);
            }           
        });

    function grayscaleImageIE(imgObj)
    {
        imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
    }

    function grayscaleImage(imgObj)
    {


        var canvas = document.createElement('canvas');
        var canvasContext = canvas.getContext('2d');

        var imgW = imgObj.width;
        var imgH = imgObj.height;
        canvas.width = imgW;
        canvas.height = imgH;

        canvasContext.drawImage(imgObj, 0, 0);
        var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

        for(var y = 0; y < imgPixels.height; y++){
            for(var x = 0; x < imgPixels.width; x++){
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i
+ 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg; 
                imgPixels.data[i + 1] = avg; 
                imgPixels.data[i + 2] = avg;
            }
        }

        canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();      
    }

Answer 1

这个怎么样？

imgObj.one('load',function(){

        var imgObj = document.getElementById('image');

        if($.browser.msie){
            grayscaleImageIE(imgObj);
        } else {
            imgObj.src = grayscaleImage(imgObj);
        }           
    });

Answer 2

你试过吗

$(document).ready(function(){ 

    var imgObj = $('#image'); 
    if($.browser.msie){
       grayscaleImageIE(imgObj);
    } else {
       imgObj.src = grayscaleImage(imgObj);
    }     
});

选择JS / jQuery事件需要帮助

2 个答案: