Question

我正在使用基于Node / Express构建的AngularJS来构建Web应用程序。我的一条路线有一个HTML5画布，我将其转换为图像。如果我用这个遍历到那条路线，我将画布转换为图像没有问题：

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

但是，当我使用动态路由时（因为我需要将唯一ID传递给＆＃39; myroute＆＃39;页面），Canvas to image conversion会引发以下错误：

无法执行＆＃39; toDataURL＆＃39; on＆＃39; HTMLCanvasElement＆＃39;：受污染的画布可能不会被出口。

以下是我的App.js中的动态路由语法：

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

为什么动态路由会导致这种情况......看起来似乎是一个CORS问题，我该如何解决？它可能与＆＃34;生活＆＃34;在Node.js / Express上？

以下是我如何将Canvas转换为图像的示例：

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。真正奇怪的仍然是我的主要问题。它在标准路线中工作，但在动态路线中失败！

Answer 1

问题在于Fabric.JS。一旦我在装载的叠加上设置了crossOrigin匿名标志，它就可以了。不确定为什么它事先使用标准路线。这是Fabric.JS中设置的标志：

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

角度动态路由导致Canvas＆＃34;无法执行＆＃39; toDataURL＆＃39;错误

1 个答案: