Generiere ein Bild von div Adjusting Canvas Größe

Question

Ich habe einen Code, der ein DIV HTML in einem PNG-Bild zu transformieren, es funktioniert erfolgreich. Aber wenn ich in großem Format nach PDF exportiere, verliert es an Qualität, wahrscheinlich weil es im Canvas kleiner als die Originalgröße erstellt wurde.

Also änderte ich die Leinwand für die Breite 2482px und die Höhe 3508px, das ist die Größe, die ich das PDF generieren möchte. Aber das Bild bleibt klein, nicht bekommen die gesamte Fläche der Box, füllt etwa 1/16 ihrer. Siehe:

html2canvas($('#quadro'), { 
    onrendered: function(canvas) { 
     var imgData = canvas.toDataURL('image/png', 1.0); 
     img = new Image(); 
     img.src = imgData; 
     img.onload = function() { 
      localStorage.setItem('imagem', imgData); 
      window.location.href = 'escolherMoldura.html'; 
     } 
     img.onerror = function() { alert('there was an image load error :('); }; 
    }, 
    scale: 2, 
    dpi: 300, 
    width: 2482, 
    height: 3508, 
    letterRendering: true, 
}); 

Siehe, es sollte die ganze Box gefüllt werden.

Können Sie mir helfen?

Answer 1

Mit der Verwendung dieses Codes können Sie hochauflösende Bilder

saveSvgAsPng($('#quadro'), "quadro.png", {scale: 2}); 

um weitere Informationen zu verwenden, um diesen link.