国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端下載 圖片 總結(jié)

cgspine / 729人閱讀

摘要：這時(shí)候后臺(tái)要提供一個(gè)請求的服務(wù)，并設(shè)置消息響應(yīng)頭，告訴瀏覽器該文件需要下載。

前端下載 圖片 總結(jié)

前端下載圖片 分為兩大類：一是服務(wù)端配合實(shí)現(xiàn)（即下載后臺(tái)服務(wù)提供的資源）； 二是 純前端下載

1、服務(wù)端配合實(shí)現(xiàn)

這種情況 對于前端開發(fā)非常簡單，只需要一個(gè)a標(biāo)簽，如：

下載圖片

當(dāng)直接訪問的某個(gè)文件時(shí)，如果該文件是二進(jìn)制等瀏覽器無法解析的文件，瀏覽器才會(huì)下載該文件，但如果瀏覽器可以自己解析該文件，則它會(huì)打開該文件并以自己的方式呈現(xiàn)出來，而不會(huì)下載，此時(shí)就需要設(shè)置消息響應(yīng)頭，告訴瀏覽器該文件需要下載而不是簡單的打開。
這時(shí)候后臺(tái)要提供一個(gè)get請求的服務(wù)，并設(shè)置消息響應(yīng)頭，告訴瀏覽器該文件需要下載。以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", //告訴瀏覽器這是一個(gè)二進(jìn)制文件
        "Content-Disposition": "attachment; filename=111", //告訴瀏覽器這是一個(gè)需要下載的文件
        "Content-Length": stats.size  //文件大小
    });
    fs.createReadStream(filePath).pipe(res);
});
2、純前端下載

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

a.下載同源圖片

這種情況很簡單 利用a標(biāo)簽的 downlaod 就可以實(shí)現(xiàn)，例：

下載圖片
b.下載跨域網(wǎng)站的圖片

借助canvas，例

// 調(diào)用方式
// 參數(shù)一： src
// 參數(shù)二： 圖片名稱，可選
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");
      // 生成一個(gè) a 標(biāo)簽
      const a = document.createElement("a");
      // 創(chuàng)建一個(gè)點(diǎn)擊事件
      const event = new MouseEvent("click");
      // 將 a 的 download 屬性設(shè)置為我們想要下載的圖片的名稱，若 name 不存在則使用"圖片"作為默認(rèn)名稱
      a.download = name || "圖片";
      // 將生成的 URL 設(shè)置為 a.href 屬性
      a.href = url;
      // 觸發(fā) a 的點(diǎn)擊事件
      a.dispatchEvent(event);
    };
    image.src = src
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99073.html

相關(guān)文章

  • 前端下載 圖片 總結(jié)

    摘要：這時(shí)候后臺(tái)要提供一個(gè)請求的服務(wù)，并設(shè)置消息響應(yīng)頭，告訴瀏覽器該文件需要下載。 前端下載 圖片 總結(jié) 前端下載圖片 分為兩大類：一是服務(wù)端配合實(shí)現(xiàn)（即下載后臺(tái)服務(wù)提供的資源）； 二是 純前端下載 1、服務(wù)端配合實(shí)現(xiàn) 這種情況 對于前端開發(fā)非常簡單，只需要一個(gè)a標(biāo)簽，如： 下載圖片 當(dāng)直接訪問的某個(gè)文件時(shí)，如果該文件是二進(jìn)制等瀏覽器無法解析的文件，瀏覽器才會(huì)下載該文件，但如果瀏覽器可以自己...

    Freelander 評論0 收藏0

  • 精彩文章大合集- 收藏集 - 掘金

    摘要：發(fā)布應(yīng)用市場的平臺(tái)搶紅包工具紅包精靈開源啦掘金紅包精靈，如果喜歡，點(diǎn)個(gè)開源不易。作者將原素材文章進(jìn)行了新內(nèi)容的添加和重新排列，但是因?yàn)槲恼赂咝У拇a編寫技巧總結(jié)前端掘金本文總結(jié)了代碼編寫技巧，來提升你的和代碼。 收藏安卓開發(fā)中非常實(shí)用優(yōu)秀的庫! 有圖有真相! - Android - 掘金本來是打算收藏工具類的,但轉(zhuǎn)念一想,已經(jīng)有這么多優(yōu)秀的庫了,就沒必要再去重復(fù)造輪子了,便歸納工作中比...

    ermaoL 評論0 收藏0

  • web前端——美化效果總結(jié)

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

    awkj 評論0 收藏0

  • web前端——美化效果總結(jié)

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

    Scorpion 評論0 收藏0

  • web前端——美化效果總結(jié)

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

    DobbyKim 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<