Html2canvas: Die Leinwandwiedergabe ist auf Retina-Displays verschwommen

Diese Bibliothek ist großartig, aber das auch zu erleben. Ich denke, dies ist das gleiche Problem wie # 379, # 373, # 340, # 203, # 312 und # 158 und in # 390 erwähnt.

Irgendwelche Updates dazu?

https://github.com/niklasvh/html2canvas/pull/127 Beheben Sie die Unschärfe

nicht behoben

: +1:

+1 bitte beheben

+1 Scalling- und Zoom-CSS-Stile funktionieren nicht richtig? Es könnte durch Zoomen von HTML-Screenshots gelöst werden und es sollte schärfer aussehen

+1 bitte beheben

+1 Fix

@zqcloveping
Bro, versuchen Sie diese Konfiguration, lösen Sie nicht 100%, sondern erhöhen Sie die Qualität

html2canvas (document.getElementById ('flag'), {
useCORS: wahr,
allowTaint: true,
letterRendering: wahr,
onrendered: function (canvas) {
var ctx = canvas.getContext ('2d');
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
},
});

@breim
Bro ， 3Q für Ihre Hilfe. Aber es scheint weniger offensichtlich zu sein. Rendering-Probleme in Retina-Geräten

Bitte repariere es!

+1 bitte beheben

Bitte reparieren Sie es, Orz

+1

Anscheinend können Sie eine vorhandene Leinwand zum Rendern verwenden (die Sie vorkonfigurieren können, um sie in der Netzhaut anzuzeigen).

Beispiel:

var w = 1000;
var h = 1000;
var div = document.querySelector('#divtoconvert');
var canvas = document.createElement('canvas');
canvas.width = w*2;
canvas.height = h*2;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var context = canvas.getContext('2d');
context.scale(2,2);
html2canvas(div, { canvas: canvas }).then(function(canvas) {
    // do what you want
});

@MisterLamb Ihre Lösung funktioniert hervorragend.

Ich möchte dies auch bitte behoben haben

+1

+1 Fix

@MisterLamb Ich versuche Ihre Lösung, kann sie aber anscheinend nicht zum diese Geige mit Ihrem Fix erstellt, der nichts zu tun scheint - wissen Sie, was ich falsch mache? Sie können auf die Schaltfläche in der Geige klicken und das Herunterladen mehrerer Dateien zulassen, um sie zu testen und festzustellen, ob sie in dieser Implementierung identisch sind.

@MisterLamb ah hat gerade auf 0.5.0-alpha1 geändert und funktioniert besser , danke. Aktualisiert die

+1

@MisterLamb et al., Gerade heute ausprobiert, und dieses Snippet funktioniert nicht mehr mit 0.5.0 b4 - leere Leinwand erhalten - und korrekt gerendert, wenn keine eigene Leinwand verwendet wird.

edit: wahrscheinlich mein bug, veränderte geige ist okay.

edit 2: kann es nicht einengen, neu implementiert wie diese und jetzt habe ich etwas sichtbar , aber mit etwas ausgeglichen. Vielleicht gibt es irgendwo einen Stil, den H2C nicht vollständig unterstützt und der das Ergebnis durcheinander bringt :( Glück gehabt.

edit 3: ja, musste es nach oben zu document.body verschieben, um den Offset loszuwerden.

@MisterLamb du bist ein echtes Genie, danke fürs Teilen ... es hat mir den Tag gerettet

@MisterLamb du bist der Beste 👍

@makc mich auch! Leere Leinwand erhalten - und korrekt gerendert, wenn keine eigene Leinwand verwendet wird.

Zu Ihrer Information : Die https://github.com/niklasvh/html2canvas/pull/1087 .. Wird derzeit damit ausgeführt

Schließung zugunsten von # 1087

@MisterLamb aber wie kann man die Auflösung des Bildes verbessern?
Wenn ich versuche, dieses Bild zu speichern, das in 96 dpi gespeichert ist, benötige ich ein Bild mit mehr als 300 dpi. wie kann ich das machen ???

@ shivtumca12 In der neuesten Version, v1.0.0-alpha.1 , können Sie die Option scale , um die Auflösung zu erhöhen ( scale: 2 verdoppelt die Auflösung von 96 dpi).

// Zoomen Sie um 90%, bevor Sie html2canvas aufrufen, und zoomen Sie dann zurück auf 100%.

document.body.style.zoom = '99% ';
html2canvas (document.querySelector ("# content"), {allowTaint: false, widht: _width, height: _height}). then (function (canvas) {

    // var pdf = new jsPDF('p','pt','a4');
    // pdf.addImage(canvas.toDataURL("image/png"), 'PNG', 10, 10, 580, 0)                            
    // pdf.save('Grafico.pdf');        
    var link = document.createElement('a');
    link.href = canvas.toDataURL("image/png");
    link.download = 'Dashboard.png';
    document.body.appendChild(link);
    link.click();
    link.style.display = 'none';
    document.body.removeChild(link)        
    document.body.style.zoom = '100%';        
    $('.preloader-wrapper').hide();
});

@MisterLamb Die obige Lösung wird für Texte auf der HTML-Seite verwendet. Während der Anzeige von Text wird der Text im Bild brillant konvertiert. Der Bildinhalt (Bild) der HTML-Seite wird jedoch weiterhin unscharf angezeigt. Bitte raten Sie mir, wie ich das korrigieren kann.

Auch für mich sind die Bilder immer noch verschwommen.

window.devicePixelRatio = 2;

Ich habe dies vor html2canvas gesetzt und es hat bei mir funktioniert

Hallo, ich möchte den persischen Text utf8 eingeben, aber die Schriftart schlägt fehl
So lösen Sie dieses Problem

mit http://jsfiddle.net/o0a8pbwd/1/ Codes

Warum weiß dieses Bild nicht?