如何解决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>
虽然 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>
解决方法
我遇到了同样的问题,不幸的是,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 是父节点,图像是子节点 希望能帮到你!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。