canvas toDataURL() - 操作不安全

Question

我将使用fabric.js在页面上绘制注释。现在，我希望将已注释的页面保存为原样，而不是在服务器端使用JSON重新绘制所有元素。

我的主要图片已加载为：

function redrawPage(src) {
                var deferred = $q.defer();

                fabric.Image.fromURL(src, function (img) {
                    zoom.reset();
                    transformation.reset();

                    mainImage = img;
                    mainImage.set({
                        left: 0,
                        top: 0
                    });
                    mainImage.hasRotatingPoint = true;
                    mainImage.selectable = false;

                    canvas.clear();
                    canvas.setWidth(mainImage.getWidth());
                    canvas.setHeight(mainImage.getHeight());
                    canvas.add(mainImage);

                    canvas.renderAll();

                    deferred.resolve();
                });

                return deferred.promise;
            }

当我想将画布图像数据发送以存储为原始图像的注释版本时，我会收到“操作不安全”的错误提示。

function getImageData() {
    var context = canvas.getContext('2d'),
        imageData = context.getImageData(0, 0, canvas.width, canvas.height);

    return imageData.data;
}

我从中加载图像的 Web 服务器不允许将 crossOrigin 设置为 "Anonymus"。

- dzona

Answer 1

如果图像主机不允许匿名访问，则您的.getImageData和.toDataURL将始终失败，因为画布被污染了。没有持久的解决方法。

您可以将图像复制（或重新路由）到自己的服务器并从与您的网页相同的域传递它。这样可以满足跨源限制，因此您的画布不会被污染，您的.getImageData将成功。当然，版权法适用。

还有几种其他解决方法，涉及用户确认以跨源符合方式加载图像。这里是一个相关的Stackoverflow帖子。

- markE

---

图像是从我的子域http//api.mdomain.com渲染的，但由于安全原因，我无法允许所有请求的 CORS 匿名访问。 - dzona

Serverside：服务器必须配置以返回包含授权内容的头部信息。你能否给我一个例子，如何设置服务器以实现这一点？ - dzona

我正要说的是 :-) ... 除了匿名访问外，您还可以将图像服务器设置为向授权目标提供服务。如果您的设计允许向授权客户提供凭据，则可以使用凭据提供跨域兼容的图像。这里有一个关于配置启用CORS的服务器的权威链接：http://enable-cors.org/index.html。 - markE

我正在删除用作文档页面的图像，并从画布中检索img数据而不是它。 - dzona