gpt4 book ai didi

javascript - 使用 Html2canvas 保存 Canvas 元素时出错

转载 作者:行者123 更新时间:2023-11-28 07:38:36 31 4
gpt4 key购买 nike

我正在尝试通过单击创建屏幕截图并将图像保存在电脑中。为此,我使用 html2canvas 插件。这是我的代码

<body id="add" style="background-color: white">       
<label id="contact" style="float: right; cursor: pointer;">Save Me</label>
<h4>My Name Is <b>SUBHAJYOTI</b> <span style="color:red">MITRA</span></h4>
<script>
$(function() {
$('#contact').on('click', function() {
html2canvas($("#add"), {
onrendered: function(canvas) {
var link = document.createElement('a');
link.download = "ScreenShot.jpeg";
link.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
link.click();
}
})
});
});
</script>
</body>

单击“保存我”并保存图像时效果很好。但图像的背景变成了黑色。 enter image description here就像上图一样。请任何人帮助我。

最佳答案

是的,我解决了这个问题。我不知道为什么,但问题出在 jpeg 上。如果我把扩展名jpeg改成png,那么问题就解决了。

link.download = "ScreenShot.png";
link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

关于javascript - 使用 Html2canvas 保存 Canvas 元素时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28315815/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com