Wie kann ich den Canvas-Hintergrund vor dem Herunterladen festlegen?

Question

Ich erstelle eine Zeichnungs-App und verwende diese Funktion, um das Canvas-Bild herunterzuladen.

function download() { 
    var dt = canvas.toDataURL('image/png'); 
    this.href = dt; 
}; 

ich die Leinwand Hintergrund white vor dem Download, weil auf Mobil setzen wollen, sind die Bilder sehr verzerrt und schwarz. Irgendwelche Ideen?

Answer 1

Möglicherweise möchten Sie ein weißes Rechteck der Größe der gesamten Leinwand unter dem eigentlichen Inhalt der Leinwand zeichnen.

// get the canvas 2d context 
var ctx = canvas.getContext('2d'); 

// set the ctx to draw beneath your current content 
ctx.globalCompositeOperation = 'destination-over'; 

// set the fill color to white 
ctx.fillStyle = 'white'; 

// apply fill starting from point (0,0) to point (canvas.width,canvas.height) 
// these two points are the top left and the bottom right of the canvas 
ctx.fillRect(0, 0, canvas.width, canvas.height); 

Sie müssen diese Zeilen anwenden, bevor Sie Ihren toDataUrl() - Stream generieren.

Idee genommen von: http://www.mikechambers.com/blog/2011/01/31/setting-the-background-color-when-generating-images-from-canvas-todataurl/