1. 程式人生 > >解決Image在canvas以及audio、video在AudioContext下跨域問題

解決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 只是一隻腳跨過去了呢,需要伺服器也設定了允許跨域才能將兩隻腳都跨過去哦。