Я использую 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. Что действительно странно, по-прежнему остается моей главной проблемой. Он работает в стандартном маршруте, но не работает в динамическом маршруте!
Проблема была в Fabric.JS. Как только я установил флаг для анонимного пользователя crossOrigin на оверлее, который я загружал, он работал. Не знаю, почему он работал со стандартным маршрутом заранее. Вот флаг, установленный в Fabric.JS:
canvas.setOverlayImage(overlayImg, canvas.renderAll.bind(canvas), {
crossOrigin: 'anonymous'
});