画布图像（安全错误）答案

【问题标题】：canvas-images (securityError)画布图像（安全错误）
【发布时间】：2016-09-25 20:20:34
【问题描述】：

这是酒鬼，我对canvaced-images有疑问。（安全错误）我构建了一个用于设计访问卡的工具。在这里，我使用了几张画布作为文本，一个用于徽标。无需为徽标插入图像，一切正常。但是当我插入图像时，我得到了 securityError。（一开始它也有效，我根本不知道是哪些变化导致了这个问题）。现在我尝试在通过 ajax 将它们发送到 php 文件之前制作一个 html2canvas。但仍然是同样的问题。它在没有徽标的情况下工作，并在插入徽标时引发 securityError。这让我最困惑。我在我的服务器上设置了整个东西。网址是：http://obs-design.de/visitenkarten/ 要添加图像，双击任何文本-canvases 并单击编辑器上的图像图标。继续后，html2canvas 显示在原始应用程序下。（这里仍然有图像）。上传的图片文件可以调用：http://obs-design.de/visitenkarten/canvasimg/visitenkarte.png（只是一直没有图片）。有人对我有提示吗？提前致谢。

【问题讨论】：

一开始你可以飞到How to ask页面...
嗨@barfly，很高兴认识你！ :) ...请包括安全错误声明。
错误声明是：[链接] SecurityError：操作不安全。错误源行： var canvasData = canvas.toDataURL("image/png");但是在 Kaiido 的帮助下，我能够解决这个问题，现在一切正常。无论如何，非常感谢您的关注。酒糟

标签： javascript canvas html2canvas

【解决方案1】：

这是因为您在 body 元素上调用 html2canvas()。

您的文档确实包含对 https://code.jquery.com/ui/1.12.0/themes/base/images/ui-icons_444444_256x240.png 的引用，该引用未加载正确的 CORS 标头。

简单的解决方法是在 #innerbox 元素上调用 html2canvas。在文档的这一部分中，没有任何东西会污染您的画布，您可以根据需要调用任何导出方法。

另请注意，canvas 元素没有crossOrigin 属性，绘制到其上下文的媒体资源必须已通过适当的跨域请求提供服务，您不能在canvas 级别这样做。

【讨论】：

非常感谢您的帮助。现在一切正常。
嗨凯多 - 首先我认为一切都很好，但事实并非如此。就像以前一样，它有时会起作用，然后又失败了。我无法理解带有和不带有图像的画布（由 html2canvas 制作）之间的区别这两个画布之间的区别在哪里。我在标题中包含了 crossOrigin，如下所示：。到目前为止这是正确的吗？我在哪里以及如何包含 CORS 标头？提前感谢您的帮助。
cors 标头由托管您将在画布上绘制的媒体的服务器发送。如果服务器未配置为接受 crossOrigin 请求，那么您就不走运了。您必须在设置其 src 之前在 img 标签上设置 crossIrigin 属性，以便服务器知道您要遵守 cors。
好吧，我现在发现的是，当我插入图片并调整它的大小以使图标不再可见时，它可以工作。只有在插入小图像时才会失败。看来，您对那个图标的提示是正确的。现在我尝试在制作 html2canvas 之前使图标不可见。（就像我对按钮所做的那样 (var but = document.getElementById('button'); but.style.display='none';)。但无论我尝试了什么，我都会得到它。document.getElementByClassName，按标签名和..和..and.没有任何作用。你能给我一个最后的提示吗。抱歉让你紧张了 ;-)
好的，我现在知道了。就像您在第一篇文章中所说的那样，确实是该图标负责该错误。我更改了 jqery.css 并使该图标仅在 :hover-state 上可见。有没有机会给你一个很好的评价你的帮助？据我了解“如何”页面我不能做任何评级，因为我自己没有足够的积分。这对我来说似乎有些神秘。如果我误解了操作页面，请告诉我。我真的很想感谢您的时间和您的帮助，尽管您已经获得了很好的评价。 CU - barfly