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

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

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

    return imageData.data;
}

我加载图片的网络服务器不允许将crossOrigin设置为“Anonymus”

Answer 1

如果图片主持人不允许匿名访问，那么您的.getImageData＆amp; .toDataURL将始终失败，因为画布受到污染。没有持久的解决方法。

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

还有一些其他解决方法涉及用户确认他们希望以跨源兼容的方式加载图像。这是一个相关的Stackoverflow post。

canvas toDataURL（） - 操作不安全

1 个答案: