javascript - html2canvas 捕获低质量图片
问题描述
我正在尝试捕获一个内部带有画布的 div。它是一个 T 恤编辑器。现在我正在使用 html2canvas 捕获这个 div,然后使用 jspdf 将其打印为 pdf。现在的问题是捕获的图像质量非常低且模糊。它的dpi非常低。
这是原始的 div 图片:
这是该 div 的打印版本:
你可以看到它们之间的质量差异是巨大的。
无论如何这里是捕获div然后将其转换为pdf的代码
var myimage;
function print() {
window.scrollTo(0, 0);
html2canvas(document.getElementById('shirtDiv')).then(function(canvas) {
myimage = canvas.toDataURL("image/jpeg");
setTimeout(print2, 1);
var doc = new jsPDF();
doc.addImage(myimage, 'JPEG', 35, 20, 130, 155);
doc.save('Test.pdf');
});
}
<div id="shirtDiv" class="page" style="width: 530px; height: 630px; position: relative; background-color: rgb(255, 255, 255); " >
<img name="tshirtview" id="tshirtFacing" src="img/crew_front.png">
<div id="drawingArea" style="position: absolute;top: 100px;left: 160px;z-index: 10;width: 200px;height: 400px;">
</div></div>
请忽略在线CSS
解决方案
好的,我这样做是因为其他人在此链接中提出了类似的问题,但答案未标记为正确,因为他可能没有正确解释。无论如何,这是解决方案。
var myimage;
function print() {
window.scrollTo(0, 0);
html2canvas(document.getElementById('shirtDiv')[0],{scale:4}).then(function(canvas) {
myimage = canvas.toDataURL("image/jpeg");
var doc = new jsPDF();
doc.addImage(myimage, 'JPEG', 35, 20, 130, 155);
doc.save('Test.pdf');
});
}
到处都提到了 scale 属性,但我在应用它时遇到了麻烦。是的,我知道我很愚蠢,但也许其他人像我一样,这可能会帮助他们:)
更新版本
这个 HTML2CANVAS 解决方案对我来说仍然不起作用,因为 scale 选项确实会在捕获它之前增加目标 div 的大小,但是如果你在那个 div 里面有一些不会调整大小的东西,例如在我的情况下它是我的画布,它就不起作用编辑工具。无论如何,为此我选择了domtoimage并相信我,我认为这是最好的解决方案。我不必面对 html2canvas 的任何问题,例如:需要在网页顶部,以便 html2canvas 可以完全捕获镜头和低 dpi 问题
无论如何对这个故事感到抱歉,但我认为每个人都应该知道,这是代码
function print() {
var node = document.getElementById('shirtDiv');
var options = {
quality: 0.95
};
domtoimage.toJpeg(node, options).then(function (dataUrl) {
var doc = new jsPDF();
doc.addImage(dataUrl, 'JPEG', -18, 20, 240, 134.12);
doc.save('Test.pdf');
});
}
dom到图像的cdn:https ://cdnjs.com/libraries/dom-to-image
jspdf的cdn:https ://cdnjs.com/libraries/jspdf
推荐阅读
- jquery - 使用 jQuery 动态更新 CSS 属性
- c# - TcpClient 不接收来自服务器的字节
- java - 尝试打开片段时,显示此错误
- flutter - 如何在 Flutter 中创建底部评论小部件?
- asp.net - 使用基本身份验证将 SSRS 报告的数据源连接到 .net Web api
- xml - XSLT 取消注释并删除 xml 版本标记
- node.js - 从“crypto”迁移到 crypto-js 库:二进制编码
- mysql - mysql - 更新前触发检查值
- botframework - 是否可以制作聊天机器人并在同一平台上多次将其用作模板?
- javascript - 输入时更改语言