用canvas元素替换背景图像的div

Question

我正在尝试用画布元素替换任何具有背景图像的div，并将这些背景图像绘制到它们上。

我已经掌握了基础知识，但我对div上的background-image和绘制到画布上的相同图像之间的图像质量差异感到有些不知所措。

以下是我用来执行此操作的代码：

$('#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/

造成这种奇怪行为的原因是什么？

Answer 1

哈！ （花了几秒钟才弄明白）

图像具有自然宽度和自然高度属性，可反映其像素尺寸。更改您的代码

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

由于图像太大，如果您在浏览器中打开图像，它会默认缩小图像。如果您尝试访问image.width和image.height，我认为您将获得那些缩小的宽度和高度属性。或者其他什么。