如何从URI加载.jpg到画布

How to load a .jpg from an URI to canvas?

本文关键字：jpg 加载 URI      更新时间：2023-09-26

我试图在画布上加载。jpg文件，但它不工作。

我使用的代码工作，但不是与我的图像。有人能帮忙解释一下发生了什么吗?

此代码不显示图像:

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

下面的代码显示了图像:

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

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

第一小提琴

image.src = "https://img.olx.pt/images_olxpt/880146485_1_1000x700_conjunto-de-sofs-terno-em-couro-verdadeiro-lisboa.jpg"

和最后的小提琴

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

一些线索?

问好,

这是CORS的问题。

阅读这里:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

相关:

:

这个跨域共享标准用于启用跨站点HTTP请求:

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

简而言之:第二个服务器为您的图像添加了响应头Access-Control-Allow-Origin:*，第一个服务器没有。

这会导致浏览器阻止在画布元素中绘制图像。

第二个站点发送这个报头:

Access-Control-Allow-Origin →*

允许跨源请求。是否可以通过跨域请求访问其资产取决于服务器，而不是客户端。

第一个站点根本不发送此标头，因此不允许您的跨站点请求。因此，由于这个原因，您无法对该图像执行您想要执行的操作。

更多信息在这里和这里

图像将加载并显示。问题是，您试图获取图像中包含的数据，然后抛出安全错误。如果您移除canvas.toDataURL，您将能够显示图像。如果你想下载它，只需将下载链接设置为图片URL

相关文章：