2016-03-23 9 views
0

Mit html2canvas versuche ich ein div zu erfassen und es als .png Datei zu speichern, und es funktioniert!save div als png - html2canvas - unscharfe Qualität

(nur window.open mit in Beispiel um es zu vereinfachen - die gleiche Qualitätsproblem)

jedoch die Bildschärfe/Qualität der Bilder im Innern des gezielten div ziemlich schlecht ist. Ich bin nicht ganz sicher, wie man die Bildqualität/Schärfe verbessert. Irgendwelche Vorschläge ?

saveAsPNG Funktion:

saveAsPNG = function(id) { 
var target = document.getElementById(id); 

    html2canvas(target, { 
    onrendered: function(canvas) { 
     var data = canvas.toDataURL("image/png", 1); 
     window.open(data);  
    } 
    }); 
}; 
+0

Zunächst ist 'image/png' nutzlos, weil es der Standardwert für' toDataURL' ist. Und die 'encoderOptions' (2. Parameter) wird nur für' image/jpeg' und 'image/webp' verwendet. Es löst das Problem nicht, aber es "korrigiert" den Code. –

+0

Ich habe diese Zeile 'document.body.appendChild (canvas);' vor der on mit 'toDataURL' hinzugefügt. Und das Canvas-Rendering ist auch verschwommen. Es kommt also von html2canvas und es gibt keine Möglichkeit die Qualität zu verbessern. –

+0

Auch habe ich diese Antwort gefunden: http://Stackoverflow.com/a/31726736/5119765 –

Antwort

0

Was html2canvas tut, ist nicht "eigentlich" einen Screenshot nehmen aber Vertretung zu machen. Es baut also den Screenshot anhand der auf der Seite verfügbaren Informationen auf.

Vielleicht eine Option, um unscharfe Bilder zu nehmen, ist es zu verwenden.

https://github.com/ivoviz/feedback

Dies ist ein jQuery-Plugin auf html2canvas basiert, die Sie Screenshots auf einen bestimmten Teil der Seite nehmen können. Probieren Sie es aus :)

+0

danke, ich überprüfe es :)! –