解决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 只是一只脚跨过去了呢，需要服务器也设置了允许跨域才能将两只脚都跨过去哦。