前端圖片壓縮

canvas 圖片跨域問題

問題描述

canvas 在使用跨域圖片的時候會出現圖片跨域致使報錯的問題

產生緣由

因爲圖片存放的域名和主頁面的域名不一致，這樣就會產生一個跨域的問題，瀏覽器對跨域圖片加載作了安全限制，若是不作任何處理會出現跨域報錯.

解決辦法

這個時候服務器端須要給圖片的請求頭加上 header("Access-Control-Allow-Origin: *"); 請求頭，容許圖片跨域，這樣瀏覽器就能夠正常顯示圖片，不會出現跨域報錯信息了，可是這個時候仍是會有別的圖片跨域問題存在.（若是圖片資源是存儲在阿里雲的，這個時候已經默認添加容許跨域的請求頭了）

經過上訴的處理方法只能解決圖片顯示的跨域報錯，若是咱們須要對圖片進行處理，使用 canvas 的 toDataURL 和 getImageData 這兩個 api 的時候會出現報錯，上面的解決辦法能夠使咱們能夠使用 drawImage 方法來將圖片繪製到 canvas 上面，可是須要生成一個新的圖片的時候，因爲 canvas 使用了一個跨域圖片，這個時候是污染狀態的，因此會出現報錯

想要解決這個問題，咱們須要使用到 crossOrigin 這個屬性

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

const img = new Image();
img.crossOrigin = '';
img.onload = function () {
    context.drawImage(this, 0, 0);
    const base64 = context.toDataURL();
};
img.src = 'http://www.test.com/images/1.jpg';

crossOrigin 是 html5 提供的支持跨域的屬性, 它能夠支持圖片，音頻，視頻等多媒體資源進行跨域

注意點

1 設置 crossOrigin 須要在設置圖片 src 屬性以前，不然可能失效。
2 onload 也須要寫在設置 src 屬性以前，不然若是是緩存圖片，有可能不觸發 onload 事件。
3 不要對本地路徑或者base64的圖片設置 crossOrigin 不然在某些系統下面可能會報錯。

原理

crossOrigin=anonymous 屬性設置以後，服務器就不會帶任何的匿名信息給你，這個時候返回的數據是絕對安全的，這個時候瀏覽器就不會阻止了

兼容性

從 IE11 開始兼容，PC 端謹慎使用！