html5 a 標籤 download 屬性 在 chrome,edge,ie9,ios safari,line,facebook 相關介紹 & 下載外部網域圖片方法
 
範例:  <a href="#" download="aaa.jpg">   當<a>標籤加上download屬性時就能下載圖片,download="aaa.jpg"則是能夠為圖片命名。   不過在跨瀏覽器的支援下就有問題了,接下來我們來探討在chrome,edge,ie9,line,facebook底下download會發生甚麼事。   download屬性兼容性如下:  chrome:支援。  edge:支援。  ie9:不支援。                 以下也會介紹若使用外部網域圖片,按下<a>之後會發生甚麼事。     chrome  支援download屬性,按下<a>之後會再網頁下方出現下載圖片,功能完全正常。   若要使用外部網域圖片必須 使用javascript先將圖片網址設定在canvas裡,再轉成base64圖檔 ,之後才能成功下載,否則會因為是下載第三方資源而讓download失效,變成是網頁檢視(預覽)圖片。   p.s  如果是使用iphone7或iphone7plus開啟chrome的話,使用canvas轉base64檔會下載成一個document檔(無效的檔案),所以為了iphone7以下的機型,必須改成下載本地端的圖檔。    edge  支援download屬性,按下<a>之後會再網頁下方出現下載圖片,功能完全正常。   若要下載圖片必須使用javascript,將 a 標籤的 href 修改url,但是必須為 本地端的圖片url ,否則會變成是網頁檢視(預覽)圖片。   若使用外部網域圖片,則download屬性失效,變成是前往該網站預覽圖片。     ie9   不支援download屬性,按下<a>之後download失效,變成是網頁檢視(預覽)圖片。     若使用外部網域圖片會變成是網頁檢視(預覽)圖片。     FACEBOOK瀏覽器    不支援download屬性,按下<a>之後download失效,變成是另開網頁檢視(預覽)圖片,長按圖片可以下載。     QQ瀏覽器   不支援download屬性,按下<a>之後download失效,變成是另開網頁檢視...