兩種圖片下載方式：點(diǎn)擊下載（常用于pc端）举畸、長(zhǎng)按下載（h5端更適合）
一、點(diǎn)擊下載
步驟記錄：
1凳枝、用戶點(diǎn)擊下載按鈕
2抄沮、使用canvas將頁(yè)面獲取的遠(yuǎn)程圖片轉(zhuǎn)換為base64格式
3、動(dòng)態(tài)創(chuàng)建一個(gè)a標(biāo)簽并將轉(zhuǎn)換后的圖片賦值給a標(biāo)簽的src
4岖瑰、觸發(fā)a標(biāo)簽的并下載
以下是js代碼：
````
imgToBase64(imgSrc,imgName){
??????var?image?=?new?Image()
??????//?解決跨域?Canvas?污染問題
??????image.setAttribute('crossOrigin',?'anonymous')
??????image.onload?=?function?()?{
??????????var?canvas?=?document.createElement('canvas')
??????????canvas.width?=?image.width
??????????canvas.height?=?image.height
??????????var?context?=?canvas.getContext('2d')
??????????context.drawImage(image,?0,?0,?image.width,?image.height)
??????????var?url?=?canvas.toDataURL('image/png')
??????????//?生成一個(gè)a元素
??????????var?a?=?document.createElement('a')
??????????//?創(chuàng)建一個(gè)單擊事件
??????????var?event?=?new?MouseEvent('click')
??????????//?將a的download屬性設(shè)置為我們想要下載的圖片名稱叛买，若name不存在則使用‘下載圖片名稱’作為默認(rèn)名稱
??????????a.download?=?imgName||?'下載圖片名稱'
??????????//?將生成的URL設(shè)置為a.href屬性
??????????a.href?=?url
??????????//?觸發(fā)a的單擊事件
? ? ? ? ? a.dispatchEvent(event)
??????}
??????image.src?=?imgSrc;
????}
````
二、長(zhǎng)按下載
步驟記錄：
1蹋订、先使用canvas將頁(yè)面獲取的遠(yuǎn)程圖片轉(zhuǎn)換為base64格式
2率挣、將轉(zhuǎn)換后的base64圖片賦值到img標(biāo)簽上顯示
3、長(zhǎng)按圖片會(huì)彈出功能菜單露戒，選擇下載即可
以下是js代碼：
````
imgToBase64(imgSrc,imgEl){
??????var?image?=?new?Image()
??????//?解決跨域?Canvas?污染問題
??????image.setAttribute('crossOrigin',?'anonymous')
??????image.onload?=?function?()?{
??????????var?canvas?=?document.createElement('canvas')
??????????canvas.width?=?image.width
??????????canvas.height?=?image.height
??????????var?context?=?canvas.getContext('2d')
??????????context.drawImage(image,?0,?0,?image.width,?image.height)
??????????var?url?=?canvas.toDataURL('image/png')
? ? ? ? ? ??imgEl.src=url;
??????}
??????image.src?=?imgSrc;
????}
````
h5跨域圖片下載經(jīng)測(cè)試在android的微信椒功、uc瀏覽器捶箱、app內(nèi)嵌網(wǎng)頁(yè)以及ios12的微信、safari瀏覽器上都可以完美下載圖片
