Загрузить изображение на холст из «внешнего» источника и сохранить его

Question

Что я пытаюсь сделать, это загрузить изображение с моего сервера и добавить его на холст, а затем я хочу его сохранить.

Добавить изображение в систему. Выполнено Когда я нажимаю save, это вызывает у меня ошибку.

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 

Я немного искал эту ошибку здесь и в Google, но я не мог ее решить.

Я устанавливаю crossOrigin для анонимных, поскольку я читаю, что мне нужно делать.

var src = "logo.svg"; 

fabric.util.loadImage(src, function(img) { 
    var object = new fabric.Image(img); 
    object.set({ 
     left: 0, 
     top: 0 
    }); 
    object.hasRotatingPoint = true; 
    object.scaleX = object.scaleY = 1; 
    canvas.add(object); 
    canvas.renderAll();  
}, null, {crossOrigin: 'Anonymous'}); 

Затем я прочитал, что мне нужно добавить какое-то правило в .htaccess.

Access-Control-Allow-Origin header 

Так что я создал .htaccess на моем домене со следующим текстом:

<IfModule mod_setenvif.c> 
    <IfModule mod_headers.c> 
     <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$"> 
      SetEnvIf Origin ":" IS_CORS 
      Header set Access-Control-Allow-Origin "*" env=IS_CORS 
     </FilesMatch> 
    </IfModule> 
</IfModule> 

Затем я проверил, если mod_setenvif.c и mod_headers.c включаются с помощью:

<?php if (strpos(shell_exec('/usr/local/apache/bin/apachectl -l'), 'mod_headers.c') !== false) { 
    echo 'Yes'; 
}else{ 
    echo 'No'; 
} ?> 

И как я получите «Да».

Любое предложение было бы замечательным.

Спасибо

EDIT:

То, что я пытаюсь это добавить изображение с моего сервера на холсте.

Answer 1

Мне кажется, что вы неправильно ссылаетесь на изображение, так как вам нужен полный веб-URL для доступа к изображению. В качестве примера:

var src = "http://www.mywebserver.com/images/logo.svg"; 

Вам не нужны модификации перекрестного происхождения или .htaccess. Ваш окончательный код должен выглядеть примерно так:

var src = "http://www.mywebserver.com/images/logo.svg" 

fabric.util.loadImage(src, function(img) { 
    var object = new fabric.Image(img); 
    object.set({ 
     left: 0, 
     top: 0 
    }); 
    object.hasRotatingPoint = true; 
    object.scaleX = object.scaleY = 1; 
    canvas.add(object); 
    canvas.renderAll();  
} 

Answer 2

Набор crossOrigin: 'Anonymous' будет решить эту проблему Tainted холст.

Пример:

fabric.util.loadImage('sample.png', function(img) { 
.... 
}, null, {crossOrigin: 'Anonymous'}); 

Refernce: https://github.com/kangax/fabric.js/issues/1386