解决Image在canvas以及audiovideo在AudioContext下跨域问题

Posted 2021-01-19 ymaster

媒体元素嘛，在对应的标签或对象上加上 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 只是一只脚跨过去了呢，需要服务器也设置了允许跨域才能将两只脚都跨过去哦。