Холст на детские не работает fabricjs

Question

Это мой код, чтобы экспортировать canavs в изображение с помощью FabricJS:

$("#canvas2png").click(function(){ 
    canvas.isDrawingMode = false; 

    if(!window.localStorage){alert("This function is not supported by your browser."); return;} 
    // to PNG 
    window.open(canvas.toDataURL('png')); 
}); 

https://jsfiddle.net/ridwanamirsene/nL4jbLon/1/

почему, когда я нажимаю холст кнопки 2 PNG .. он не работает ..

он запрашивает образец http://jsfiddle.net/softvar/9hrcp/ от softvar

Как я могу исправить эту проблему?

Answer 1

Вы только перекрестную проблему домена с изображениями:

VM71 fabric.min.js: 3 Uncaught DOMException: Не удалось выполнить 'toDataURL' на 'HTMLCanvasElement': Tainted холсты не может быть экспорт. (...)

CORS enabled image

Что такое «испорченный» холст?

Хотя вы можете использовать изображения без одобрения CORS в своем полотне, делая это, чтобы покрыть полотно. Как только холст имеет , вы уже не можете извлекать данные из холста. Например, для вы больше не можете использовать холсты toBlob(), toDataURL() или методы getImageData(); это приведет к ошибке безопасности.

Я изменил свой метод инициализации:

initialize: function(src) { 
     this.image = new Image(); 
     this.image.crossOrigin = "Anonymous"; 
     this.image.src = src; 
     this.image.onload = (function() { 
      this.width = this.image.width; 
      this.height = this.image.height; 
      this.loaded = true; 
      this.setCoords(); 
      this.fire('image:loaded'); 
      canvas.renderAll(paper); 
     }).bind(this); 
    }, 

и я использовал поддержкой Корс изображения из Wikimedia:

var imgs = [ 

    'https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg', // cat 
    'https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg' // mouse 
]; 

теперь your forked fiddle работы.