html2canvas 捕获低质量图片答案

【问题标题】：html2canvas capturing low quality picturehtml2canvas 捕获低质量图片
【发布时间】：2020-09-05 23:48:26
【问题描述】：

我正在尝试捕获一个内部带有画布的 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

【问题讨论】：

嘿！为什么将addImage 的大小设置为 130 x 155？这难道不是问题吗？也许你必须增加尺寸。原件似乎是 165x205 像素。也许你先把它缩小然后再放大，这会导致图像模糊。
没关系我试过这个问题出在html2canvas
您可以将图像本身保存到文件并检查属性吗？也许在 html2canvas 中使用 { scale: 2 } 会有所帮助。另请参阅stackoverflow.com/a/36858051/9450776，他们似乎已经解决了类似的问题。
标记为重复上述链接。 HTML2canvas generates Blurry images

标签： javascript jquery fabricjs jspdf html2canvas

【解决方案1】：

好吧，我这样做是因为其他人在此link 中提出了类似的问题，但答案未标记为正确，因为他可能没有正确解释。无论如何，这是解决方案。

 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 中有不会调整大小的东西 eg 在我的情况下，它是我的编辑工具的画布。无论如何，为此我选择了 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

【讨论】：