Fabric.js canvas toDataUrl

Question

У меня проблема с экспортом полотна ткани в URL.

Как я могу экспортировать весь контент с imes из canvas в url? Потому что сейчас я вижу, что экспортируется только красный фон.

Вот моя скрипка: 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

Ваш результат верен. Вы получаете данные холста перед загрузкой изображения. Загрузка изображений асинхронна. Если вы сделаете так (используя вашу скрипку):

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

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

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

              });

Это не будет работать, потому что изображение из другого домена. Если ваш реальный проект содержит изображения в том же домене, вы можете попробовать код выше. Если это из другой области, то это будет сложнее, чем ваша логика