Question

因此您通过文件输入选择图像，所选图像文件将变为window.url.createobjecturl并传递给未修改的隐藏“img”元素，然后将图像元素的当前数据预览呈现为画布元素。到现在为止还挺好。但是当我尝试渲染canvas.toDataURL时，我不断得到加重安全性的例外，因为它不安全。这发生在chrome和firefox上。

明白这是一个用html INPUT元素选择的文件OBJECT，而不是通过“file：//”url，网页是一个实际的网页，并通过“http：//”加载不是通过“file：//”。

图像文件甚至还没有离开浏览器去服务器，所以不应该有任何域问题。它只是一个原始blob被断言作为图像的源，然后告诉画布更新它的预览，它做了。之后，当尝试保存画布内容时，浏览器会触发错误。

我已经阅读了关于canvas元素被污染的所有规格，这种情况不符合任何场景。

我在一些提供代码片段的mozilla演示中看到了一个类似的例子，向人们展示了如何做同样的事情，但我还没有看到是否有任何问题。

任何想法？ TIA

＃

=== UPDATE ===

＃

好吧，我已经弄清楚了问题是什么，但我仍然不清楚为什么这是一个问题。这是设置：

1）页面通过例如“example.com /”

进行调用

2）脚本通过以下方式调用：“r.example.com/script.js”

3）如果脚本加载来自“r.example.com”的任何图像，用于PAGE DESIGN，而不是画布，那么它会如何污染整个页面。在这种情况下，我通过javascript绘制整个页面，因此标题图像污染了页面的其余部分。如果我将标题图像更改为来自“example.com”而不是“r.example.com”，那么画布抱怨不安全的问题就会消失，一切都很好。

我不明白为什么会发生这种情况。标题图像是从与javascript文件相同的位置加载的，为了参数，我甚至将access-control-allow-origin设置为“*”，对于主域和子域都没有差。

所以，允许从任何地方进行访问控制，标题图像来自与javascript文件相同的位置，并且它没有被绘制到画布（这是用户文件），所以为什么要通过画面绘制标题图像javascript污染它与它无关的画布???此外，css和其他媒体是从同一个子域加载的，但这不会影响页面，只要脚本没有加载它们[o_0]。

我希望将所有资源保留在一个单独的子域中以实现可伸缩性，因此，这个问题令人沮丧，因为我不太明白为什么它仍在发生......

Answer 1

如果您希望图像位于单独的子域中，则必须更改图像的原点以允许所有子域如下：

img .origin = '*.mydomain.com'

我正在使用带有kineticJS的画布，并且我自己进行了测试。

Answer 2

看起来您必须在图像对象本身上设置此属性，因为它最初没有域[o_0]

img.origin = 'mydomain.com'

用于上传文件的canvas toDataURL会在同一域上引发安全性错误

2 个答案: