如何从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/en-US/docs/Web/HTTP/Access_control_CORS
相关::
这个跨域共享标准用于启用跨站点HTTP请求:
- 使用drawImage
将图像/视频帧绘制到画布上
简而言之:第二个服务器为您的图像添加了响应头Access-Control-Allow-Origin:*
,第一个服务器没有。
这会导致浏览器阻止在画布元素中绘制图像。
第二个站点发送这个报头:
Access-Control-Allow-Origin →*
允许跨源请求。是否可以通过跨域请求访问其资产取决于服务器,而不是客户端。
第一个站点根本不发送此标头,因此不允许您的跨站点请求。因此,由于这个原因,您无法对该图像执行您想要执行的操作。
更多信息在这里和这里
图像将加载并显示。问题是,您试图获取图像中包含的数据,然后抛出安全错误。如果您移除canvas.toDataURL
,您将能够显示图像。如果你想下载它,只需将下载链接设置为图片URL
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- 如何在生成下载文件时显示加载动画
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 无法在通过jQuery的ajax加载的页面中执行javascript
- Emberjs应用程序加载在除Index之外的所有路由上
- 在chrome.tabs.onCreated之后加载HTML页面
- 单击F5时如何停止页面加载
- HTML5音频加载和播放获胜'我不能在iPad上工作
- 跟踪在页面加载时应用内联样式的JavaScript
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- jQuery Lazy加载动画滚动
- Html页面上的多个Base64图像和平滑加载
- 加载collada纹理数据(.jpg本身)时对其进行操作
- 检测 jpg 图像是否正确加载
- Javascript加载图像源jpg或png
- JavaScript+JSON问题:无法加载照片/undefined.jpg
- Youtube播放器加载webp图像而不是jpg
- 加载动画gif后,我希望将其更改为jpg
- 如何从URI加载.jpg到画布
- 我如何加载只有一部分的jpg与JavaScript