3

現在、キャンバスを使用して、javascript でグレースケール画像を動的に生成しています。グレースケール コードは次のとおりです。

// Grayscale w canvas method
function grayscale(src)
{
    var canvasUrl = false;

    try
    {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var imgObj = new Image();
        imgObj.src = src;
        canvas.width = imgObj.width;
        canvas.height = imgObj.height;
        ctx.drawImage(imgObj, 0, 0);
        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        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;
            }
        }
        ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        canvasUrl = canvas.toDataURL();
    }
    catch(err)
    {
        canvasUrl = false;
    }

    return canvasUrl;
}

私のコードでは、私の画像はdiv. はdiv、javascript が実行され、すべての画像のグレースケール表現の生成が完了するまで、「display:none」に設定されます。その時点で、divに「display: block」が設定されます。

これはほとんどの場合機能しますが、常に機能するわけではありません。 次divの行でエラーが発生するため、 が表示されないことがあります。

var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);

エラー

SOに関する関連する質問に基づいて、一般的な解決策は$(window).load(func);、グレースケール生成コードを実行することです。

しかし、それは私がやっていることです：

<script type="text/javascript">
    var animateTime = 250;

    // On window load. This waits until images have loaded which is essential
    $(window).load(function(){
        // Fade in images so there isn't a color "pop" document load and then on window load
        $(".item img").animate({opacity:1},animateTime);

        // clone image
        $('.item img').each(function(){
            var el = $(this);
            el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
                var el = $(this);
                el.parent().css({"width":el.css("width"),"height":el.css("height")});
                el.dequeue();
            });
            this.src = grayscale(this.src);

            if(!this.src)
                alert('An error occurred.'); // handle the occasional DOM error...
        });

        // Fade image
        $('.item img').mouseover(function(){
            $(this).parent().find('img:first').stop().animate({opacity:1}, animateTime);
        })
        $('.img_grayscale').mouseout(function(){
            $(this).stop().animate({opacity:0}, animateTime);
        });
        $('.item').mouseover(function() {
            $(this).children('h3').css('display', 'block');
            $(this).children('h3').stop().animate({opacity:1}, animateTime);
        });
        $('.item').mouseout(function() {
            $(this).children('h3').css('display', 'none');
            $(this).children('h3').stop();
            $(this).children('h3').css('opacity', '0');
        });

        $("#loading").css('display', 'none'); // hide the loading GIF
        $(".outer_content_container").css('display', 'block');
        $(".outer_content_container").animate({opacity:1}, animateTime*4);
    });
</script>

これにより、「display: none;」を設定している可能性があります。画像を含む親でdiv、ブラウザが画像をまったくロードせず、window.onload? の呼び出しに進みます。

4

2 に答える 2

4

競合状態があるため、画像が読み込まれるまで画像の幅と高さは設定されません。ディメンションをいつ読み取れるかを知るには、onload イベントを使用します。

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var imgObj = new Image();
    imgObj.onload = function() {
        //do the processing here
    };
    imgObj.src = src;
于 2013-07-03T18:02:03.560 に答える
2 
canvas.height = imgObj.height;gagein

ガギンとは？

imgObj.src = src;

その行の前に画像読み込みメソッドを使用し、残りの関数をその中にラップします。

imgObj.addEventListener("load", function() {
    canvas.width = imgObj.width;
    canvas.height = imgObj.height;gagein
    ctx.drawImage(imgObj, 0, 0);
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    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;
        }
    }
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    canvasUrl = canvas.toDataURL();
}, false);
于 2013-07-03T18:03:30.847 に答える