canvas toDataURL（） - 操作不安全

我使用fabric.js在页面上绘制注释。现在我想按原样保存anootated页面，而不是使用JSON重新绘制服务器端的所有元素。canvas toDataURL（） - 操作不安全

我有主图像加载：

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”

来源

2016-01-20 dzona

如果图像主机不允许匿名访问，那么你的，因为在画布上有污点.getImageData & .toDataURL总是会失败。没有持久的解决方法。

您可以将图像复制（或重新路由）到您自己的服务器，并将其从与您的网页相同的域传送出去。这符合交叉来源限制，因此您的画布不会受到污染，您的.getImageData将会成功。当然，版权法适用。

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

来源

2016-01-20 19:09:59 markE

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

Serverside：服务器必须配置为返回标头），表明该响应包含授权内容。“'你能给我一个例子如何设置服务器来实现这个 – dzona

我正要说:-) ...除了匿名访问，你也可以设置你的形象服务器交付给授权目的地。如果您的设计允许向授权客户端授予凭据，您可以使用凭据来提供跨源兼容图像。这是一个关于配置启用CORS的服务器的权威链接（http://enable-cors.org/index.html）。 – markE

canvas toDataURL（） - 操作不安全

回答

相关问题