媒体元素嘛,在对应的标签或对象上加上 crossOrigin = 'anonymous' 即可。

例如 Image 在canvas 上绘制时会跨域:

  1. <img crossOrigin="anonymous" src="your Image url"></img>

如果并非页面上的元素而是利用 Image 对象的的话:

  1. const img = new Image();
  2. img.crossOrigin = 'anonymous';
  3. img.src = 'imageUrl';

同理,对于 HTMLMediaElement 的标签元素来说也一样:

  1. <audio crossOrigin="anonymous" src="your Image url"></audio>
  1. const audio = new Audio();
  2. audio.crossOrigin = 'anonymous';
  3. audio.src = 'mediaUrl';

如此一来,只要服务器允许了跨域那么就可以跨过去了,这里设置了 crossOrigin 只是一只脚跨过去了呢,需要服务器也设置了允许跨域才能将两只脚都跨过去哦。

解决Image在canvas以及audio、video在AudioContext下跨域问题的更多相关文章

  1. 解决No 'Access-Control-Allow-Origin' header is present on the requested resource.跨域问题(后台(java)解决方法)

    附:前端常见跨域解决方案(全) 跨域错误 解决方法 在后台写一个过滤器来改写请求头 附上一个前端不知所以然的后台java代码: public class CorsFilter implements F ...

  2. 解决No 'Access-Control-Allow-Origin' header is present on the requested resource.跨域问题

    跨域错误 错误原因 解决方法在后台写一个过滤器过滤器来改写请求头头 CorsFilter.java public class CorsFilter implements Filter { @Overr ...

  3. 解决 IIS 反向代理ARR URLREWRITE 设置后,不能跨域跳转 return Redirect 问题

    1.选择iis根节点,点击ARR 2.选择代理设置 3.去掉reverse rewrite host in response headers的勾选,点击应用即可

  4. 解决本地请求不到json问题,老是出现跨域

    有时候我们需要在本地模拟请求json数据,但是老是出现谷歌跨域的问题, 网上找了方法,说是把json和HTML文件放在同一目录,还有的是页面引用时加上callback的. 但是不知道咋的,可能是本人不 ...

  5. 如何解决ajax跨域问题(转)

    由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题.本篇将讲述一个小白从遇到跨域不 ...

  6. 看小白如何解决ajax跨域问题

    由于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决ajax的跨域问题.本篇将讲述一个小白从遇到跨域不知道 ...

  7. 如何解决ajax跨域问题

    如何解决ajax跨域问题(转) 由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题 ...

  8. Spring Boot中通过CORS解决跨域问题

    今天和小伙伴们来聊一聊通过CORS解决跨域问题. 同源策略 很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由Netscap ...

  9. .Net 站点跨域问题及解决方法

    一.什么是站点跨域 了解跨域之前, 先了解下什么同源策略?百度百科:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功 ...

随机推荐

  1. P4449 于神之怒加强版 (莫比乌斯反演)

    [题目链接] https://www.luogu.org/problemnew/show/P4449 给定n,m,k,计算 \(\sum_{i=1}^n \sum_{j=1}^m \mathrm{gc ...

  2. Codeforces - 914F bitset 维护字符串匹配个数

    题意:给你一个串,支持两种操作,1修改某个点的字符,2询问[l,r]内模式串P与原串的匹配个数 bitset的写法是真的6啊,简直是优雅暴力的典范 bs[i]表示\(T_i\)与\(P\)匹配与否, ...

  3. Codeforces - 185A 简单矩阵快速幂

    题意:求第n个三角形内部的上三角形个数 对每个三角形分别维护上下三角形个数,记为\(dp[1][i],dp[2][i]\) 规律很明显是 \(dp[1][i+1]=3*dp[1][i]+dp[2][i ...

  4. setlocal enabledelayedexpansion 解释

    看字面的意思是:设置本地为延迟扩展.其实也就是:延迟变量,全称"延迟环境变量扩展", 在cmd执行命令前会对脚本进行预处理,其中有一个过程是变量识别过程,在这个过程中,如果有两个% ...

  5. 小a与“204”------数列、排序

    链接:https://ac.nowcoder.com/acm/contest/317/B来源:牛客网 小a非常喜欢204204这个数字,因为′a′+′k′=204′a′+′k′=204. 现在他有一个 ...

  6. 第五次 Scrum Meeting

    第五次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/4/9 22:00 30min 大运村1号楼6F 附Github仓库:WEDO 例会照片 工作情况总结(4.9) ...

  7. postgresql数据库primary key约束/not null约束/unique约束及default值的添加与删除、列的新增/删除/重命名/数据类型的更改

    如果在建表时没有加primary key约束.not null约束.unique约束.default值,而是创建完表之后在某个字段添加的话 1.primary key约束的添加与删除 给red_pac ...

  8. Java基础23-main方法

    /* 主函数(主方法) 1.public(访问修饰符,公共的)代表类或者该函数访问权限是最大的 2.static 代表主函数随着类的加载就已经存在了 3.void 代表主函数没有具体的返回值 4.ma ...

  9. one-vs-all案例

    使用one-vs-all初始手写字母识别 数据特点 每一个图片都是20 x 20的像素矩阵,但是在输入的样本中是一个1 x 400的向量,标签y在{0, 1, 2, ..., 9}之间取值 共有500 ...

  10. bootstrap-table使用记录

    效果如图所示: 1.框架用的flask 目录结构如下: 2.前端代码如下: table-test1.html <!DOCTYPE html> <html> <head&g ...