Угловая динамическая маршрутизация вызывает Canvas «Ошибка выполнения ошибки toDataURL»

0

Я использую AngularJS, построенный поверх Node/Express для веб-приложения. Один из моих маршрутов имеет холст HTML5, который я конвертирую в изображение. Если я перехожу к этому маршруту с этим, у меня нет проблем с преобразованием моего холста в образ:

when('/myroute/, { templateUrl: 'views/mytemplate.html', controller: 'myCtrl as vm' })

Однако, когда я использую динамическую маршрутизацию (поскольку мне нужно передать уникальный идентификатор на страницу "myroute"), преобразование Canvas в изображение отображает следующую ошибку:

Не удалось выполнить 'toDataURL' в 'HTMLCanvasElement': теневые холсты могут не экспортироваться.

Вот динамический синтаксис маршрута из моего App.js:

when('/myroute/:ID, { templateUrl: 'views/mytemplate.html', controller: 'myCtrl as vm' })

Почему динамический маршрут вызывает это... то, что кажется проблемой CORS, и как ее разрешить? Может ли это быть связано с "живым" над Node.js/Express?

Вот пример того, как я конвертирую Canvas в Image:

var canvasImage = document.getElementById("c");
var img = canvasImage.toDataURL("image/png");

Обновление 1: я просто попробовал следующее, но получил ту же ошибку:

var canvasImage = document.getElementById("c");
var img = new Image();
img.crossOrigin = "anonymous";
img.src = canvasImage;
img = canvasImage.toDataURL("image/png");

Обновление 2: после углубления я обнаружил, что это мой оверлей, который вызывает фактическую ошибку, поскольку чрезмерное изображение поступает с удаленного сервера. У этого удаленного сервера включен CORS. Что действительно странно, по-прежнему остается моей главной проблемой. Он работает в стандартном маршруте, но не работает в динамическом маршруте!

  • 0
    Это может помочь: stackoverflow.com/questions/20424279/…
  • 0
    Я посмотрел на это, но это не сработало для меня / хотел бы знать, почему динамический маршрут вызывает эту проблему.
Показать ещё 4 комментария
Теги:
canvas

1 ответ

0

Проблема была в Fabric.JS. Как только я установил флаг для анонимного пользователя crossOrigin на оверлее, который я загружал, он работал. Не знаю, почему он работал со стандартным маршрутом заранее. Вот флаг, установленный в Fabric.JS:

canvas.setOverlayImage(overlayImg, canvas.renderAll.bind(canvas), {
                crossOrigin: 'anonymous'
            });

Ещё вопросы

Сообщество Overcoder
Наверх
Меню