Bild speichern mit html2canvas - Pure Javascript

Ich versuche, eine Schaltfläche zum Erfassen und Speichern meiner Seite in PNG zu machen.Bild speichern mit html2canvas - Pure Javascript

Jetzt kann ich es mit der Auflösung, die ich brauche, duplizieren, aber anstatt es anzuzeigen, müssen Sie einen Dialog anzeigen und speichern Sie es wie "Speichern unter ...", um die Datei umzubenennen.

function myRenderFunction(canvas) { 
    destination.appendChild(canvas); 
} 

var element = document.getElementById('element'); 
var destination = document.getElementById('destination'); 



html2canvas(element, { 
    scale: 3, 
    onrendered: myRenderFunction 
});

Hier ist ein JSFiddle meines aktuellen Prozesses.

Quelle

2017-06-03 Léo Durand

Um das Bild lokal speichern können Sie Ihre Funktion auf die folgenden machen ändern: Dies ist aus einer Antwort von Stackoverflow How to save img to user's local computer using HTML2canvas

Quelle

2017-06-03 12:38:27

bedeutete

function myRenderFunction(canvas){ var a = document.createElement('a'); // toDataURL defaults to png, so we need to request a jpeg, then convert for file download. a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); a.download = 'somefilename.jpg'; a.click(); }

I a „als Fenster speichern“, wo der Benutzer auswählen kann, der Name und das Ziel des Captures. –

Der Dialog hängt vom Browser ab. Wenn Sie in chrome den Download-Ordner in den Chrome-Einstellungen eingerichtet haben, wird die Datei dort sofort ohne Dialog heruntergeladen, sonst wird Ihnen das Dialogfeld angezeigt. Aber das hängt ganz vom Browser ab. Es gibt keine anderen Möglichkeiten, Dateien mit Javascript herunterzuladen. –

Danke, das wusste ich nicht. Es funktioniert, aber es ist seltsam, ich habe keine Ahnung, warum ich es nicht mit einem Knopf machen kann. [JSFiddle] (https://jsfiddle.net/Leshautsdurant/tvyux7eo/18/) –

Bild speichern mit html2canvas - Pure Javascript

Antwort

Verwandte Themen