Fabric.js Canvas toDataUrl

Question

Ich habe ein Problem mit der Leinwand Canvas zu URL exportieren.

Wie kann ich den gesamten Inhalt mit ies von Canvas zu URL exportieren? Weil ich jetzt sehe, dass nur roter Hintergrund exportiert wurde.

Hier ist meine Geige: https://jsfiddle.net/y7pu4wn3/13/

<div id="custom-label" style="position: absolute; right: 0px; top: 50px; z-index:10; width: 512px; height: 256px; border: 1px solid #7d8d20"> 
    <canvas id="draw-area" width="512" height="256" style=""></canvas> 
</div> 

Answer 1

Ihr Ergebnis ist korrekt. Sie erhalten Canvas-Daten, bevor das Bild geladen wird. Das Laden von Bildern erfolgt asynchron. Wenn Sie dies (mit Ihrer Geige) tun möchten:

fabric.Image.fromURL(imageObj.src, function(myImg) { 
       canvas.add(myImg); 

       var pngURL = canvas.toDataURL(); 
       console.log(pngURL); 

       $('#placeHolder').html('<img src="'+pngURL+'"/>'); 

       }); 

Es wird nicht funktionieren, weil das Bild aus einer anderen Domäne ist. Wenn Ihr aktuelles Projekt Bilder auf derselben Domain hat, können Sie den obigen Code ausprobieren. Wenn es aus einer anderen Domäne ist, so wird es komplizierter zu tun, dann Ihre Logik