javascript - 如何将 .jpg 从 URI 加载到 Canvas ？

Question

我正在尝试在 Canvas 上加载 .jpg 文件，但它不起作用。

我使用的代码有效，但不适用于我的图像。有人可以帮忙解释一下发生了什么吗？

此代码不显示图像:

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

此代码显示图像:

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

fiddle 之间的唯一区别是:

在第一个 fiddle 中，

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

最后一个 fiddle ，

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

一些线索？

最好的问候，

Answer 1

这是一个 CORS 问题。

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

此处相关::

This cross-origin sharing standard is used to enable cross-site HTTP requests for:

• Images/video frames drawn to a canvas using drawImage

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

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