canvas toDataURL() - 操作不安全

Question

我正在使用 fabric.js 在页面上绘制注释。现在我想按原样保存 anootated 页面，而不是使用 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;
            }

当我想发送 canvas 图像数据以存储为原始图像的注释版本时，我收到 "Operation is insecure" 错误。

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

    return imageData.data;
}

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

Answer 1

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

您可以将图像复制（或re-route）到您自己的服务器并从与您的网页相同的域中传送它。这满足 cross-origin 限制，因此您的 canvas 不会被污染并且您的 .getImageData 会成功。当然，版权法适用。

还有其他几种解决方法，涉及用户确认他们希望以 cross-origin 兼容的方式加载图像。这是相关的 .

canvas toDataURL() - 操作不安全

canvas toDataURL() - operation is insecure

canvas

cors

fabricjs

angularjs