html canvas schwarzen hintergrund zu weißem hintergrund bei der erstellung jpg bild von png bild

Question

Ich habe eine canvas die mit einem png bild geladen wird. Ich erhalte seine jpg base64 String durch .toDataURL() Methode wie folgt:

$('#base64str').val(canvas.toDataURL("image/jpeg")); 

Aber die transparenten Teile des png Bildes werden in dem neuen jpg Bild schwarz dargestellt.

Alle Lösungen, um diese Farbe auf Weiß zu ändern? Danke im Voraus.

Answer 1

Diese Schwärzung tritt auf, weil die Umwandlung von 'image/jpeg' das Alpha aller Canvas-Pixel vollständig undurchsichtig macht (Alpha = 255). Das Problem ist, dass transparente Canvas-Pixel fully-black-but-transparent sind. Wenn Sie also diese schwarzen Pixel undurchsichtig machen, ist das Ergebnis ein geschwärztes JPEG.

Die Problemumgehung besteht darin, alle undurchsichtigen Canvas-Pixel manuell in die gewünschte weiße Farbe anstelle von Schwarz zu ändern.

Auf diese Weise, wenn sie gemacht werden undurchsichtig sie weiß statt schwarz Pixel angezeigt.

Hier ist, wie:

// change non-opaque pixels to white 
var imgData=ctx.getImageData(0,0,canvas.width,canvas.height); 
var data=imgData.data; 
for(var i=0;i<data.length;i+=4){ 
    if(data[i+3]<255){ 
     data[i]=255; 
     data[i+1]=255; 
     data[i+2]=255; 
     data[i+3]=255; 
    } 
} 
ctx.putImageData(imgData,0,0); 

Answer 2

Marks Antwort richtig ist, aber wenn ein Bild einer gewissen Anti-Aliasing angewandt hat, wird das exportierte Bild nicht so gut sein, wie es (vor allem Text) sein sollte. Ich mag seine Lösung verbessern:

// change non-opaque pixels to white 
var imgData=ctx.getImageData(0,0,canvas.width,canvas.height); 
var data=imgData.data; 
for(var i=0;i<data.length;i+=4){ 
    if(data[i+3]<255){ 
     data[i] = 255 - data[i]; 
     data[i+1] = 255 - data[i+1]; 
     data[i+2] = 255 - data[i+2]; 
     data[i+3] = 255 - data[i+3]; 
    } 
} 
ctx.putImageData(imgData,0,0); 

Answer 3

// change non-opaque pixels to white 
var imgData=ctx.getImageData(0,0,canvas.width,canvas.height); 
var data=imgData.data; 
for(var i=0;i<data.length;i+=4){ 
    if(data[i+3]<255){ 
     data[i] = 255 - data[i]; 
     data[i+1] = 255 - data[i+1]; 
     data[i+2] = 255 - data[i+2]; 
     data[i+3] = 255 - data[i+3]; 
    } 

Answer 4

Wenn Sie nur vollen weißen transparenten Pixel verschieben wollen nur überprüfen (data [i + 3] == 0) anstelle von (Daten [i + 3] < 255).

Answer 5

Diese Antwort ist ein bisschen länger, aber ich finde es "korrekter", dass es diese Dinge behandelt, ohne direkt Rohdaten zu modifizieren. Ich finde das eine ziemlich chaotische und theoretisch unbefriedigende Lösung. Es gibt eingebaute Funktionen, um das zu erreichen, und sie sollten benutzt werden. Hier ist die Lösung, die ich gefunden/pilfered:

function canvasToImage(backgroundColor){ 

var context = document.getElementById('canvas').getContext('2d'); 

canvas = context.canvas; 
//cache height and width   
var w = canvas.width; 
var h = canvas.height; 

var data; 

//get the current ImageData for the canvas. 
data = context.getImageData(0, 0, w, h); 

//store the current globalCompositeOperation 
var compositeOperation = context.globalCompositeOperation; 

//set to draw behind current content 
context.globalCompositeOperation = "destination-over"; 

//set background color 
context.fillStyle = backgroundColor; 

//draw background/rect on entire canvas 
context.fillRect(0,0,w,h); 

//get the image data from the canvas 
var imageData = this.canvas.toDataURL("image/jpeg"); 

//clear the canvas 
context.clearRect (0,0,w,h); 

//restore it with original/cached ImageData 
context.putImageData(data, 0,0); 

//reset the globalCompositeOperation to what it was 
context.globalCompositeOperation = compositeOperation; 

//return the Base64 encoded data url string 
return imageData; 
} 

Grundsätzlich Sie ein weißes Hintergrundbild erstellen und Unterlage unter der Leinwand und dann das drucken. Diese Funktion wird meistens von jemandes Blog kopiert, aber es erforderte ein wenig Modifikation - wie zum Beispiel den Kontext zu bekommen - und direkt von meinem (Arbeits) Code kopiert, so lange wie das Element canvas die ID 'canvas' hat, Sie sollten in der Lage sein, es zu kopieren und einfügen und es funktioniert.

Dies ist der Blog-Post ich es von geändert:

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

Der große Vorteil meiner Funktion über diese ist, dass es gibt statt png JPEG, die auch in Chrom arbeiten wahrscheinlicher mit einem Dataurlimit von 2MB, und es ergreift tatsächlich den Kontext, was eine eklatante Auslassung in der ursprünglichen Funktion war.