前端實現圖片下載功能
阿新 • • 發佈：2018-12-18
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <h3>測試下載圖片</h3> <img id="images" src="https://g.bcwcdn.com/Fp2IZUu83KB20MqPZDiLeirWXZJL" alt="" width="30" /> <button onclick="upload()">點選下載圖片</button> </body> <script> // ********************************方案一 圖片重新整理就下載*********************************************** function downloadImage(selector, name) { const image = new Image(); // 解決跨域 canvas 汙染問題 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { 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"); // 生成一個 a 標籤 const a = document.createElement("a"); // 建立一個點選事件 const event = new MouseEvent("click"); // 將 a 的 download 屬性設定為我們想要下載的圖片的名稱，若 name 不存在則使用'圖片'作為預設名稱 a.download = name || "圖片"; // 將生成的 URL 設定為 a.href 屬性 a.href = url; // 觸發 a 的點選事件 a.dispatchEvent(event); // return a; }; image.src = document.getElementById(selector).src; } // 呼叫方式 // 引數一： 選擇器，代表 img 標籤 // 引數而： 圖片名稱，可選 downloadImage("images"); // **********************************方案二 點選下載按鈕下載********************************************* function upload() { console.log(111); const image = new Image(); // 解決跨域 canvas 汙染問題 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { 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"); // 生成一個 a 標籤 const a = document.createElement("a"); // 建立一個點選事件 const event = new MouseEvent("click"); // 將 a 的 download 屬性設定為我們想要下載的圖片的名稱，若 name 不存在則使用'圖片'作為預設名稱 a.download = name || "圖片"; // 將生成的 URL 設定為 a.href 屬性 a.href = url; // 觸發 a 的點選事件 a.dispatchEvent(event); // return a; }; image.src = document.getElementById("images").src; } </script> </html>