[英]html2canvas capturing low quality picture
我正在嘗試使用 canvas 捕獲一個 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 里面有一些不會調整大小的東西,例如在我的情況下它是 canvas編輯工具。 無論如何,為此我選擇了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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.