1.保存圖片至本地
下載文件是一個(gè)非常常見(jiàn)的需求，前端保存頁(yè)面為圖片本刽，最常見(jiàn)的方案都是利用html2canvas來(lái)生成圖片鲸湃，同時(shí)利用HTML5的新屬性download來(lái)點(diǎn)擊保存到本地。
2.PC瀏覽器下載圖片
網(wǎng)上一些實(shí)現(xiàn)方法由于跨域會(huì)導(dǎo)致a標(biāo)簽在部分瀏覽器中會(huì)直接打開(kāi)新標(biāo)簽頁(yè)子寓，因此最終實(shí)現(xiàn)兼容性較好的下載方式為用 js 去獲取圖片暗挑，獲得其 base64，放回 img 的 src 中再進(jìn)行繪制斜友。
分為四步：
- 用 JavaScript 創(chuàng)建一個(gè)隱藏的a標(biāo)簽
- 設(shè)置它的 href 屬性
- 設(shè)置它的 download 屬性
- 用 JavaScript 來(lái)觸發(fā)這個(gè)它的 click 事件
downloadImage(selector, name) {
// selector 為要img 標(biāo)簽類(lèi)或id名炸裆，name用來(lái)指定下載圖片的名稱(chēng)
const image = new Image();
// 解決跨域 Canvas 污染問(wèn)題
image.setAttribute('crossOrigin', 'anonymous');
image.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0, image.width, image.height);
const url = canvas.toDataURL('image/png');
// 生成一個(gè)a元素
const a = document.createElement('a');
// 創(chuàng)建一個(gè)單擊事件
const event = new MouseEvent('click');
// 將a的download屬性設(shè)置為我們想要下載的圖片名稱(chēng)，若name不存在則使用‘下載圖片名稱(chēng)’作為默認(rèn)名稱(chēng)
a.download = name || '下載圖片名稱(chēng)';
// 將生成的URL設(shè)置為a.href屬性
a.href = url;
// 觸發(fā)a的單擊事件
a.dispatchEvent(event);
};
image.src = document.querySelector(selector).src;
}
跨域問(wèn)題需要在給 img 元素設(shè)置 crossOrigin:anonymous;屬性鲜屏，圖片路徑服務(wù)端必須設(shè)置允許跨域烹看。
為了更快的響應(yīng)，很多 CDN 會(huì)緩存圖片的返回值洛史，而緩存的值是不帶 CORS 頭的惯殊。因?yàn)闆](méi)有 CORS 頭，所以 js 請(qǐng)求會(huì)被攔截也殖。
因此本地文件及圖片管理系統(tǒng)中的圖片可以下載土思，網(wǎng)絡(luò)在線(xiàn)圖片及iPic上的圖片鏈接均存在跨域問(wèn)題無(wú)法下載。
（除img標(biāo)簽圖片下載之外還有canvas圖片下載等方法。）
3.通過(guò)HTML5實(shí)現(xiàn)APP保存圖片至相冊(cè)
通過(guò)HTML5實(shí)現(xiàn)APP保存圖片己儒，需要調(diào)用手機(jī)系統(tǒng)中相冊(cè)/保存圖片到相冊(cè)崎岂，經(jīng)過(guò)查閱發(fā)現(xiàn)，現(xiàn)有APP保存圖片HTML相關(guān)方法是通過(guò)HTML5 plus即中國(guó)HTML5產(chǎn)業(yè)聯(lián)盟的擴(kuò)展規(guī)范來(lái)進(jìn)行實(shí)現(xiàn)闪湾。
通過(guò)屬性plus.gallery獲取相冊(cè)管理對(duì)象冲甘。
具體開(kāi)發(fā)實(shí)現(xiàn)參考：HTML5 Plus實(shí)現(xiàn)APP圖片相關(guān)操作
4.總結(jié)
PC瀏器實(shí)現(xiàn)下載圖片該方法是基于從 DOM 讀取的元素及屬性來(lái)一點(diǎn)點(diǎn)的繪制 canvas，因此途样，它只能正確地呈現(xiàn)它理解的元素和屬性损合，這意味著有許多 CSS 屬性不起作用。圖片大小娘纷、圖片路徑跨域問(wèn)題、圖片格式等都可能導(dǎo)致下載不成功跋炕。通過(guò)原生HTML5以及JS實(shí)現(xiàn)保存圖片至APP本地相冊(cè)并未找到方法實(shí)現(xiàn)赖晶。關(guān)于保存圖片，涉及之前沒(méi)了解過(guò)的知識(shí)點(diǎn)較多辐烂，關(guān)于相關(guān)學(xué)習(xí)本次只是簡(jiǎn)單了解遏插，具體掌握還需繼續(xù)深入學(xué)習(xí)。
