使用画布元素替换背景图像的div

我想用具有背景图像的画布元素替换所有背景图像并将其绘制到背景图像上的div。使用画布元素替换背景图像的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); 
    } 
});

下面是结果：

enter image description here

它看起来像图像被拉伸由于某种原因，但我我试图console.log我在drawImage使用的图像的宽度/高度和值匹配的图像尺寸。结果仅显示图像的一部分 - 真正的是900x4000像素。

这里是在运行中的问题的jsfiddle链接：

http://jsfiddle.net/xRKJt/

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

来源

2012-10-03 boz

如果您从'drawImage（）'调用中移除'image.height'和'image.width'参数，会发生什么？ – voithos

然后它只获得正确的高度，看起来更加舒展 - http://i.stack.imgur.com/ZgJci.jpg – boz

您正在测试哪些浏览器并尝试定位？你可以设置一个jsfiddle页面吗？ – Rob

哈！（需要几秒钟才能算出）

图像具有反映其像素尺寸的naturalWidth和naturalHeight属性。更改代码

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

由于图像是如此之大，如果你在浏览器中打开图像默认情况下它缩小它。如果您尝试访问image.width和image.height，我认为您会获得缩小的宽度和高度属性。或者沿线的东西。

来源

2012-10-03 20:10:38

这似乎并不适用于我，它仍然看起来像它以前一样 - http://jsfiddle.net/FMTqD/ – boz

你也有宽度和高度在代码中翻转（不知道这是否是有目的的） –

如果我把它们放在正确的位置，那么它会变得非常紧张。翻转他们似乎给了我正确的尺寸。 – boz

使用画布元素替换背景图像的div

回答

相关问题