小编pre*_*us_的帖子

Html2canvas 忽略图像的对象拟合

我一直在尝试利用 html2canvas 来截取元素的屏幕截图

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

有没有为此散步。这是我的代码

<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>

Run Code Online (Sandbox Code Playgroud)

虽然 html 是这样的