JCROP fügt dem transparenten Bild auf dem schwarzen Hintergrund einen schwarzen Hintergrund hinzu

Question

Wenn ich versuche, JCROP mit einem transparenten Hintergrund-Canvas zu verwenden, rendert es schwarz, ich habe es online überprüft, und die auf der Frage jcrop turns transparent image black angegebene Lösung funktioniert nicht für mich , es produziert immer noch einen schwarzen Hintergrund. Unten ist mein Code. Jede Hilfe, um diese Arbeit zu bekommen, wäre sehr willkommen!

var maxWidth = 200; 
var img = new Image(); 

img.onload = function() { 

    var canvas = document.createElement('canvas'); 
    canvas.width = maxWidth; 
    canvas.height = img.height * (maxWidth/img.width); 

    var ctx = canvas.getContext('2d'); 

    ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 

    document.getElementById('image').src = canvas.toDataURL(); 

    $('#image').Jcrop({ 
    bgColor:'', 
    setSelect: [0, 0, canvas.width, canvas.height] 
    }); 


} 
img.setAttribute('crossOrigin', 'anonymous'); 
img.src = 'https://z1.porter21.com/wp-content/uploads/sites/2/2015/02/sprite1.png'; 

Eine Live-Probe

Answer 1

http://jsfiddle.net/seahorsepip/wepu47zn/

hinzugefügt Thumbnail-Vorschau auf die Ernte/Maßstab bei https://jsfiddle.net/9Lmapguv/ gefunden werden kann/drehen/etc: http://jsfiddle.net/seahorsepip/wepu47zn/1/

hinzugefügt Thumbnail-Vorschau auf die Ernte auswählen und Ernte/skalieren/rotieren/etc: http://jsfiddle.net/seahorsepip/wepu47zn/2/ Die Miniaturansicht zum Auswählen von Vorschaubildern im dritten Link wird von einem div-Wrapper mit Überlauf abgeschnitten ausgeblendet, um zu verhindern, dass bei jeder Auswahl ein Canvas-Zuschneiden erforderlich ist.

Quelle: How should I crop the image at client side using jcrop and upload it?

Siehe Kommentar in der validateImage Funktion können Sie eine Methode aufrufen, dort eine Miniaturbildquelle zu aktualisieren. Ich fügte bgColor: "" hinzu, das scheint jetzt irgendwie zum Code auch zu arbeiten. Es hat auch einige Transformationsfunktionen und eine Übermittlungsfunktion (IE10 +) dank @Tatarize

Zum Senden von beschnittenen Bildern in älteren Browsern sehen Sie meinen Beitrag an der Quelle.

---

Ich habe nie, dass die Arbeit entweder:/

Aber das Zuschneiden Ausgang ist immer noch ein transparentes Bild natürlich auch dann, wenn es in den cropper schwarz zeigt.

Ich habe den folgenden "Hack" verwendet, um das Canvas-Element mit dem Hintergrund hinten auszublenden und stattdessen ein transparentes CSS-Hintergrundbild anzuzeigen.

$(".jcrop-active").css({"background": "url(\""+img.src+"\")", "background-size": "100%"}); 

.jcrop-active canvas { 
    display: none; 
} 

Beispiel: https://jsfiddle.net/seahorsepip/w8bgm8hk/