如何将URI从URI加载到画布？

Question

我试图在画布上加载.jpg文件，但它无效。

我使用的代码可以使用，但不能使用我的图片。有人可以帮助并解释发生了什么吗？

此代码不显示图像：

http://jsfiddle.net/mcepc44p/127/

此代码显示图像：

http://jsfiddle.net/mcepc44p/2/

小提琴之间的唯一区别是：

在第一个小提琴中，

image.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/"

和最后一个小提琴，

$BackupItem = Get-AzureRmRecoveryServicesBackupItem -BackupManagementType MARS .....

一些线索？

最诚挚的问候，

Answer 1

这是一个CORS问题。

在此处阅读：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

相关::

  

此跨源共享标准用于启用跨站点HTTP请求：

     

  
• 使用drawImage绘制到画布的图像/视频帧
  

简而言之： 在第二个小提琴中为您的图像提供服务的服务器会添加一个响应标题Access-Control-Allow-Origin:*，第一个服务器不会。

这会导致您的浏览器阻止在canvas元素中绘制图像。

Answer 2

第二个站点发送此标题：

Access-Control-Allow-Origin →*

启用跨源请求。由服务器决定是否可以通过跨源请求访问其资产，而不是客户端。

第一个网站根本不发送此标头，因此不允许您的跨源请求。所以，由于这个原因，你无法做你想对那个图像做的事情。

更多信息here和here。

Answer 3

图像将加载并显示。问题是您尝试获取图像中包含的数据，然后引发安全性错误。如果您删除canvas.toDataURL，则可以显示图像。如果您想下载它，只需将下载链接参考设置为图像URL