前端下載圖片總結

Freelander 發布于2019-08-02 11:56 / 1167人閱讀

摘要：這時候后臺要提供一個請求的服務，并設置消息響應頭，告訴瀏覽器該文件需要下載。

前端下載圖片總結

前端下載圖片分為兩大類：一是服務端配合實現（即下載后臺服務提供的資源）；二是純前端下載

1、服務端配合實現

這種情況對于前端開發非常簡單，只需要一個a標簽，如：

下載圖片

當直接訪問的某個文件時，如果該文件是二進制等瀏覽器無法解析的文件，瀏覽器才會下載該文件，但如果瀏覽器可以自己解析該文件，則它會打開該文件并以自己的方式呈現出來，而不會下載，此時就需要設置消息響應頭，告訴瀏覽器該文件需要下載而不是簡單的打開。
這時候后臺要提供一個get請求的服務，并設置消息響應頭，告訴瀏覽器該文件需要下載。以node為例：

app.get("/api/download/", (req, res, next) => {//以文件流的形式下載文件
    var filePath = path.join(__dirname, "../src/images/erwei.jpg");
    var stats = fs.statSync(filePath);
    res.set({
        "Content-Type": "application/octet-stream", //告訴瀏覽器這是一個二進制文件
        "Content-Disposition": "attachment; filename=111", //告訴瀏覽器這是一個需要下載的文件
        "Content-Length": stats.size  //文件大小
    });
    fs.createReadStream(filePath).pipe(res);
});

2、純前端下載

這其中又分為兩種情況：一是下載同源圖片（如同項目文件夾中的圖片）；二是跨域網站的靜態資源（如自己公司的CDN的靜態資源）

a.下載同源圖片

這種情況很簡單利用a標簽的 downlaod 就可以實現，例：

下載圖片

b.下載跨域網站的圖片

借助canvas，例

// 調用方式
// 參數一： src
// 參數二： 圖片名稱，可選
export const downloadImage = (src: string, name: string) => {
    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);
    };
    image.src = src
}

GPU云服務器云服務器前端下載下載圖片前端js圖片上傳教程圖片下載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53227.html

前端下載圖片總結

摘要：這時候后臺要提供一個請求的服務，并設置消息響應頭，告訴瀏覽器該文件需要下載。前端下載圖片總結前端下載圖片分為兩大類：一是服務端配合實現（即下載后臺服務提供的資源）；二是純前端下載 1、服務端配合實現這種情況對于前端開發非常簡單，只需要一個a標簽，如：下載圖片當直接訪問的某個文件時，如果該文件是二進制等瀏覽器無法解析的文件，瀏覽器才會下載該文件，但如果瀏覽器可以自己...

cgspine 2019-08-23 12:53 評論0 收藏0
精彩文章大合集- 收藏集 - 掘金

摘要：發布應用市場的平臺搶紅包工具紅包精靈開源啦掘金紅包精靈，如果喜歡，點個開源不易。作者將原素材文章進行了新內容的添加和重新排列，但是因為文章高效的代碼編寫技巧總結前端掘金本文總結了代碼編寫技巧，來提升你的和代碼。收藏安卓開發中非常實用優秀的庫! 有圖有真相! - Android - 掘金本來是打算收藏工具類的,但轉念一想,已經有這么多優秀的庫了,就沒必要再去重復造輪子了,便歸納工作中比...

ermaoL 2019-08-29 13:03 評論0 收藏0
web前端——美化效果總結

摘要：概述項目開發過程中使用到了不少前端美化效果的方法，總結一下圖片作為背景要實現的效果是，任意一張圖片，不需要調整圖片尺寸，圖片完全填充網頁背景。概述項目開發過程中使用到了不少web前端美化效果的方法，總結一下 1 圖片作為背景要實現的效果是，任意一張圖片img-page-background.png，不需要調整圖片尺寸，圖片完全填充網頁背景。首先需在CSS代碼中創建.page-bg...

awkj 2019-08-01 17:28 評論0 收藏0
web前端——美化效果總結

摘要：概述項目開發過程中使用到了不少前端美化效果的方法，總結一下圖片作為背景要實現的效果是，任意一張圖片，不需要調整圖片尺寸，圖片完全填充網頁背景。概述項目開發過程中使用到了不少web前端美化效果的方法，總結一下 1 圖片作為背景要實現的效果是，任意一張圖片img-page-background.png，不需要調整圖片尺寸，圖片完全填充網頁背景。首先需在CSS代碼中創建.page-bg...

Scorpion 2019-08-20 18:56 評論0 收藏0
web前端——美化效果總結

摘要：概述項目開發過程中使用到了不少前端美化效果的方法，總結一下圖片作為背景要實現的效果是，任意一張圖片，不需要調整圖片尺寸，圖片完全填充網頁背景。概述項目開發過程中使用到了不少web前端美化效果的方法，總結一下 1 圖片作為背景要實現的效果是，任意一張圖片img-page-background.png，不需要調整圖片尺寸，圖片完全填充網頁背景。首先需在CSS代碼中創建.page-bg...

DobbyKim 2019-08-29 13:13 評論0 收藏0