Html2canvas 忽略适合图像的对象

Posted 2023-03-25

【中文标题】Html2canvas 忽略适合图像的对象

【英文标题】：Html2canvas Ignores Object fit for image

【发布时间】：2021-04-29 21:24:03

【问题描述】：

我一直在尝试使用 html2canvas 来截取一个元素

我注意到在 html2canvas 屏幕截图之后，使用 object-fit 属性的 div 元素内的图像被拉伸了

有没有为此四处走走。这是我的代码

<script>window.addEventListener('load', function () 

      
 var bigCanvas = $("<div>").appendTo('body');
 var scaledElement = $("#Element").clone()
 .css(
  'transform': 'scale(1,1)',
  'transform-origin': '0 0'
 )
 .appendTo(bigCanvas);
 
 var oldWidth = scaledElement.width();
 var oldHeight = scaledElement.height();

 var newWidth = oldWidth * 1;
 var newHeight = oldHeight * 1;
 
 bigCanvas.css(
   'width': newWidth,
   'height': newHeight
 )


 html2canvas(bigCanvas, 
   onrendered: function(canvasq) 
   var image = document.getElementById('image');
  image.style.width='300px';
 
   image.src = canvasq.toDataURL();
   
    bigCanvas.remove() ;
   
 );) </script>

虽然 html 是这样的

<div id="Element" class="container">
  
<div class="bg-light p-3 text-center">

<h3>iPhone 12 Pro Max</h3>

<div class="m-2 shadow" style="height:400px;width:100%;">

<img src="img/agency.jpeg" style="object-fit:cover;height:100%;width:100%;" />
</div>

<h4>Now available for free</h4>

</div>

</div>

<div class="container" style="width:100%;border:2px solid black;overflow:hidden">

 <img src="" id="image" style="max-width:100%;"/>
 </div>

【参考方案1】：

我遇到了同样的问题，不幸的是，html2cavas 似乎不支持 object-fit 属性，但我用 flexbox 解决了，结果很好，设置父节点的宽度和高度很重要：

 .logo-preview-inner 
      height: 200px;
      width: 200px;
      border-radius: 50%;
      border: solid 1px #e6e6e6;
      margin: 0 auto;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      img 
        width: 100%;
      

其中 .logo-preview-inner 类是父节点，图像是子节点 希望能帮到你！