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

我从中加载图像的网络服务器不允许将 crossOrigin 设置为“匿名”

Answer 1

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

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

还有其他几种解决方法需要用户确认他们希望以跨域兼容的方式加载图像。这是一个相关的Stackoverflow post。