3

背景画像がキャンバス要素にある div を、それらの背景画像が描画されたものに置き換えようとしています。

background-image基本は動作していますが、div 上の画像とキャンバスに描画された同じ画像の画質の違いに少し困惑しています。

これを行うために使用しているコードは次のとおりです。

$('#container div').each(function(){
    if($(this).css('background-image') != 'none'){
        var bgImage = $(this).css('background-image').replace(/^url|[\(\)]/g, '');
        var image = new Image();
        var attrs = $(this)[0].attributes;
        var dimensions = new Array();
        var canvas = document.createElement('canvas');

        dimensions.push($(this).height())
        dimensions.push($(this).width());

        $(canvas).attr('width',dimensions[0]);
        $(canvas).attr('height',dimensions[1]);
        $(canvas).css('background-image', 'none');

        for(var i = 0; i < attrs.length; i++){
            $(canvas).attr(attrs[i].nodeName,attrs[i].nodeValue);
        }

        var ctx = canvas.getContext('2d');

        image.onload = function () {
            ctx.drawImage(image, 0, 0, image.height, image.width);
        }
        image.src = bgImage;

        $(this).replaceWith(canvas);
    }
});

結果は次のとおりです。

ここに画像の説明を入力

console.log何らかの理由で画像が引き伸ばされているように見えますが、使用している画像の幅/高さを試してみましたがdrawImage、値は画像の寸法と一致しています。結果は画像の一部を示しています。実際の画像は 900x4000 ピクセルです。

実際の問題を示すjsfiddleリンクは次のとおりです。

http://jsfiddle.net/xRKJt/

この奇妙な動作の原因は何ですか?

4

1 に答える 1

5

ハ！（理解するのに数秒かかりました）

画像には、そのピクセル寸法を反映する naturalWidth および naturalHeight 属性があります。コードを変更する

        image.onload = function () {
            ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight);
        }

画像が非常に大きいため、ブラウザで画像を開くと、デフォルトで縮小されます。image.widthとimage.heightにアクセスしようとすると、ズームアウトされた幅と高さの属性が得られると思います。または、線に沿った何か。

于 2012-10-03T20:10:38.513 に答える