解决Image在canvas以及audio、video在AudioContext下跨域问题

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

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

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

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

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

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

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

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

posted @ 2018-11-11 01:37  小马不黑  阅读(1594)  评论(0编辑  收藏  举报