我一直在尝试使用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>
虽然 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>