Question

我有使用html5画布进行T恤设计的rails 4应用程序。 Fabricjs用作Javascript HTML5画布库。当我在画布上添加文本对象并调用toDataURL方法时，它工作正常。当我在画布上添加通过AWS S3提供的svg图像时，它会在画布上加载但是当我在画布上调用toDataURL时，它会变为空白并且我在控制台上出现以下错误：

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

最初，当通过S3提供的图像被加载到文档上时，我收到以下错误：

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure image 'http://example.s3.amazonaws.com/clip_arts/arts/000/000/001/thumb/1.png?1431770898'. This content should also be served over HTTPS.

我通过互联网搜索并发现它是一个CORS问题。在我的AWS桶中，我添加了以下CORS配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://example.com/</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://*.example.com/</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

调用toDataURL在Firefox上工作正常但不适用于任何其他浏览器。

Answer 1

除了Khawer Zeshan回答..

我在Chrome上使用toDataURL遇到了同样的问题。除了<AllowedOrigin>Anonymous</AllowedOrigin>之外，我还向AWS S3 CORS配置添加了<AllowedOrigin>*</AllowedOrigin>。它对我有用。

Answer 2

您可能需要将crossOrigin:'Anonymous'添加到该功能

fabric.loadSVGFromURL(svgUrl,function(objects,options) {

}, {
    crossOrigin: 'Anonymous'
});

而不是在CORS中有这个

<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>

只需将其添加到CORS

即可

<AllowedHeader>*</AllowedHeader>

AWS S3上的CORS配置无法正常工作

2 个答案: