Canvas throw error of 'Error: Uncaught (in promise): SecurityError: The operation is insecure. toDataURL@[native code] '

Canvas throw error of 'Error: Uncaught (in promise): SecurityError: The operation is insecure. toDataURL@[native code] '

  1. 我在一个图像编辑器中工作，我需要在其中将视频设置为 canvas 背景。
  2. 所以我使用的 fabricjs 版本 1.7.22 太旧了，但由于它的复杂性我无法在我的项目中更新。
  3. 我首先创建一个 html 视频元素，然后将该元素插入到 fabricjs 对象的 var img = new fabric.Image(htmlVideoElement) 中。
  4. 然后我将 fabricJS img 对象设置为 canvas 背景，如 canvas.setBackgroundImage(img, ()=>{ canvas.renderAll() }, {crossOrigin: 'anonymous'})
  5. 我已经在所有地方添加了 crossOrigin 标签，但在 mac Safari 浏览器中仍然出现错误。
  6. 它在 windows machine 在所有浏览器中运行完美。但不在 MAC.
    7. 的 safari 中
  7. 错误是这样的：operation is insecure 当我尝试使用 canvas.toDataURL()
    8. 从 canvas 制作图像时出现此错误
  8. 注意 : 我无法控制视频所在的跨域服务器 load.so 我无法在服务器中配置跨域请求。

有什么解决方案或建议可以帮助我将视频设置为 canvas canvas 背景并跨域 url。

经过Brain smashing，我找到了问题的确切来源。这不是跨源问题。这是图像问题 url。

我被设置为股票视频Url。现在简而言之，pixabay 视频 url 不是视频位置的实际 url。当我将 url 粘贴到浏览器时，它会在另一个 url 上重定向我并在浏览器中显示视频。所以我得到一个问题，我之前使用的 Url 是 API URL 的一个国王。我被设置为视频源，因此生成了问题。

现在我在那个 pixabay 图片 Url 上发送 xmlHttpRequest() 并获取原始视频位置 url 然后我将它设置为 canvas 背景并且它正在工作。