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

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

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

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

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

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

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';
} ?>

И для обоих я получаю «Да».

Любое предложение было бы здорово.

Спасибо

РЕДАКТИРОВАТЬ:

Я пытаюсь добавить изображение с моего сервера на холст.

0

Решение

Мне кажется, что вы неправильно ссылаетесь на изображение, потому что вам нужен полный веб-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();
}
0

Другие решения

Задавать crossOrigin: 'Anonymous' решит эту проблему.

Пример:

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

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

-1

По вопросам рекламы [email protected]