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并且值与图像尺寸相匹配。结果只显示了图像的一部分——真正的图像是 900x4000ish 像素。

这是一个显示问题的 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 回答