[Angular] 下載image並顯示

5 mins.
  1. 1. 緣起
  2. 2. Download
    1. 2.1. url
    2. 2.2. base64

緣起

最近公司的產品有一個需求,是要讓使用者自行更換網頁的圖片,所以就有上傳下載圖片的需求,後端API是直接看上傳什麼格式就下載什麼內容,但是這樣的資料其實在angular中是需要加工才能使用的,來記錄一下作法,廢話不多說上code

Download

這種檔案的下載,後端吐回來其實是blob,所以必須要將httpclient指定類型

1
this.http.get(url, { responseType: 'blob' });

收到blob的資料後,要轉換成圖片其實有兩種作法,我比較偏好地一種,大家可以根據自己需求來使用

url

使用window的URL.createObjectURL這個api將檔案直接由瀏覽器暫存於記憶體中,只要使用一個短短的url就可以做使用,免去漏漏長的字串

限定於ie10+使用,萬惡的IE…

1
2
3
4
5
6
7
8
9
10
11
this.http.get(url, { responseType: 'blob' })
.pipe(
map(data => {
// 避免沒檔案回傳卻還是產生url然後變成叉燒包
if (data.size > 0) {
const urlCreator = window.URL;
return this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(data));
} else {
return undefined;
}
}));

base64

這個傳統的作法其實也叫做data uri schema,就是內容會比較肥大一點,但好處就是瀏覽器都支援

1
2
3
4
5
6
7
8
9
10
11
12
13
14
this.http.get(url, { responseType: 'blob' })
.pipe(
mergeMap(data => Observable.create(obs => {
if (data.size > 0) {
const reader = new FileReader();
const reader = new FileReader();
reader.onload = function () {
obs.next(reader.result);
};
reader.readAsDataURL(data);
} else {
obs.next(undefined);
}
})));