如何从URI加载.jpg到画布？ [英] How to load a .jpg from an URI to canvas?

问题描述

我正在尝试在画布上加载.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/zh-CN/docs/Web/HTTP/Access_control_CORS

此处相关::

此跨域共享标准用于为以下站点启用跨站点HTTP请求：

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

简而言之：
在第二个小提琴中为您的图像提供服务的服务器添加了响应标头 Access-Control-Allow-Origin：* ，而第一台服务器则没有。 b

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

I'm trying to load a .jpg file on a canvas but it not working.

I'm using a code that works, but not with my image. Can someone help and explain what is happening?

This code does not show the image:

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

This code show the image:

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

The only difference between the fiddles is this:

In the first fiddle,

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

and the last fiddle,

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

Some clues?

Best Regards,

解决方案

It's a CORS problem.

Read about it here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Relevant here::

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

• Images/video frames drawn to a canvas using drawImage

In short: The server serving your the image in the second fiddle adds a Response Header Access-Control-Allow-Origin:*, the first server doesn't.

This leads to your browser blocking the image from being drawn in a canvas element.

这篇关于如何从URI加载.jpg到画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！