2017-06-08 6 views
1

Ich baue einige Diagramme auf einer Leinwand mit Charts.js und Bootstrap. Benutzer möchten in der Lage sein, eine PNG-Datei des Diagramms herunterzuladen, um sie in eine PowerPoint-Folie zu kopieren. Ich habe die folgende Funktion, die funktioniert und es lädt die Akte herunter, aber es hat einen vollständig schwarzen Hintergrund. Auf der Seite hat das Bild einen weißen Hintergrund. Ich sehe eine Reihe von Posts darüber mit JPEG und die Lösung sagt, PNG zu verwenden, aber ich verwende PNG. Ich bin mir nicht sicher, ob ich etwas in der Leinwand selbst ändern kann. Ich habe versucht, die Hintergrundfarbe der Leinwand explizit auf Weiß zu setzen, aber das hilft nicht.Download Leinwand in PNG schwarzen Hintergrund

die downloadToPNG Funktion:

function downloadToPNG() { 
    var canvas = document.getElementById('parentCanvas'); 
    var dt = canvas.toDataURL('image/png'); 
    var hiddenElement = document.createElement('a'); 
    hiddenElement.href = dt; 
    hiddenElement.target = '_blank'; 
    hiddenElement.download = fileName; 
    hiddenElement.click(); 
    hiddenElement.remove(); 
} 
+0

Hat das gespeicherte Bild selbst einen schwarzen Hintergrund oder ist es nur, wenn es an den Power-Point übergeben wird? Ist es wirklich ein Hintergrund oder ist das ganze Bild komplett schwarz? Welche Art von Kontext wird auf der Leinwand initialisiert? Wie haben Sie versucht, den weißen Hintergrund hinzuzufügen? Könnten Sie ein [MCVE] hinzufügen? – Kaiido

Antwort

0

Der Hintergrund könnte sein, wegen einiger kaskadiert CSS-Werte verloren, können Sie die Hintergrundfarben für html, Körper zu verdoppeln, zu überprüfen, und alle Eltern-Element. Dies kann auch damit zu tun haben, dass die PNG-Information als base64-codiert weitergegeben wird, was eine normale Methode für den Browser ist, Bildinformationen in alphanumerische Zeichen zu übertragen. Dieser Thread könnte dabei helfen how to save canvas as png image?

+0

Das hat geholfen. Vielen Dank. Ich habe etwas CSS zurückverfolgt und gefunden. – spfurlong

Verwandte Themen