快捷導(dǎo)航

使用JavaScript下載圖片并保存到本地的詳細(xì)解釋和代碼示例

更新時(shí)間：2024年07月12日 09:01:24 作者：zero笨小孩

在前端開發(fā)中經(jīng)常會(huì)遇到需要將圖片從網(wǎng)絡(luò)上下載并保存到本地的需求,這篇文章主要給大家介紹了關(guān)于使用JavaScript下載圖片并保存到本地的詳細(xì)解釋和代碼示例,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在前端開發(fā)中，經(jīng)常會(huì)遇到需要將圖片從網(wǎng)絡(luò)上下載并保存到本地的需求。本文將介紹如何使用 JavaScript 實(shí)現(xiàn)下載圖片的功能，并提供詳細(xì)的解釋和代碼示例。

1. downloadImage 函數(shù)

首先，讓我們來了解 downloadImage 函數(shù)的實(shí)現(xiàn)原理和作用。這個(gè)函數(shù)的主要功能是接收?qǐng)D片的 URL 和要保存的文件名，然后在用戶點(diǎn)擊下載鏈接時(shí)將圖片保存到本地。

function downloadIamge(src, imgName){?
    let image = new Image();?
    image.src = src;?
    image.setAttribute("crossOrigin", "anonymous");?
    image.onload = function() {?
        let c = document.createElement("canvas");?
        c.width = image.width;?
        c.height = image.height;?
        c.getContext("2d").drawImage(image, 0, 0, image.width, image.height);?
        let a = document.createElement("a"); ?
        a.download = imgName;?
        a.href = c.toDataURL("image/png");?
        a.click();?
    }?
}

2. 實(shí)現(xiàn)原理解釋

首先，創(chuàng)建一個(gè)新的 Image 對(duì)象，并將圖片的 URL 賦值給它。
通過設(shè)置 crossOrigin 屬性為 "anonymous"，解決跨域訪問的問題。
當(dāng)圖片加載完成后，創(chuàng)建一個(gè)新的 canvas 元素，并將圖片繪制到 canvas 上。
創(chuàng)建一個(gè)新的 <a> 元素作為下載鏈接，并設(shè)置下載的文件名為 imgName。
將 canvas 的數(shù)據(jù)轉(zhuǎn)換為 Data URL，并將其賦值給下載鏈接的 href 屬性。
最后，模擬用戶點(diǎn)擊下載鏈接，觸發(fā)圖片下載的操作。

3. 使用示例

下面是一個(gè)使用示例，展示了如何調(diào)用 downloadImage 函數(shù)下載圖片到本地：

const imageUrl = "https://example.com/image.jpg";
const imageName = "myImage.jpg";
downloadImage(imageUrl, imageName);

4. 注意事項(xiàng)

確保圖片的 URL 是有效的，并且具有足夠的權(quán)限允許跨域訪問。
如果圖片來自其他域名，請(qǐng)確保在服務(wù)器端設(shè)置了正確的跨域資源共享（CORS）配置。

通過本文的介紹，你現(xiàn)在應(yīng)該了解如何使用 JavaScript 下載圖片并保存到本地。這個(gè)方法非常實(shí)用，可以幫助你在前端開發(fā)中處理各種圖片下載需求。

附：多個(gè)下載

前端下載的實(shí)際操作是由瀏覽器來處理的。當(dāng)用戶點(diǎn)擊下載鏈接或者通過JavaScript觸發(fā)文件下載時(shí)，瀏覽器會(huì)負(fù)責(zé)發(fā)起文件下載請(qǐng)求，并將文件保存到用戶的本地計(jì)算機(jī)中。瀏覽器會(huì)處理文件下載的所有細(xì)節(jié)，包括網(wǎng)絡(luò)請(qǐng)求、接收文件數(shù)據(jù)、保存文件等操作。

所以一般情況下，我們要下載多個(gè)文件，只需要循環(huán)向?yàn)g覽器提交下載任務(wù)就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <button>點(diǎn)擊下載多個(gè)圖片</button>
    <script>
      const srcList = [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
        ]
      // 獲取button標(biāo)簽
      const bt = document.querySelector('button')
      // 給button添加點(diǎn)擊事件 
      bt.addEventListener('click',downloadMany(srcList))

      //下載多個(gè)
      function downloadMany(srcList){
          return function() {
              srcList.forEach((url,index)=>{
               //循環(huán)調(diào)用download函數(shù)下載
              download(url,index+'png')
            })
          }
      }
      //下載函數(shù)
      function download(url,fileName){
            //圖片的地址 
            fetch(url)
              // 獲取 blob 對(duì)象
              .then(res=>res.blob())
              .then(blob=>{
                // 創(chuàng)建a標(biāo)簽
                var link = document.createElement('a');
                // 設(shè)置a標(biāo)簽為不可見
                link.style.display = 'none';
                // 將a標(biāo)簽添加到body
                document.body.appendChild(link);
                // 生成Blob URL并設(shè)置給a標(biāo)簽的href屬性
                var url = window.URL.createObjectURL(blob);
                link.href = url;
                // 設(shè)置a標(biāo)簽的download
                link.download = fileName;
                // 模擬點(diǎn)擊事件進(jìn)行下載
                link.click();
                //下載完成后清理URL對(duì)象和a標(biāo)簽
                window.URL.revokeObjectURL(url);
                document.body.removeChild(link); 
              })
      }

    </script>
</body>
</html>

注意：URL.createObjectURL 生成的url如果過多會(huì)有效率問題，可以在合適的時(shí)機(jī)（download后）釋放掉。

到此這篇關(guān)于使用JavaScript下載圖片并保存到本地的文章就介紹到這了,更多相關(guān)JS下載圖片并保存到本地內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: