html2canvas捕获低质量的图片

Question

我正在尝试捕获一个包含画布的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

Answer 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的大小，但如果该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');
});
}

Cdom for image：https://cdnjs.com/libraries/dom-to-image

CSDN for jspdf：https://cdnjs.com/libraries/jspdf