使用JavaScript將圖片保存至本地

最近的開發當中，我們需要為img標簽以及canvas動態繪制的圖像提供下載功能，下面是經過探索后我們得出的結果。

一、Canvas 版本

// 下載Canvas元素的圖片
function downloadCanvasIamge(selector, name) {
 // 通過選擇器獲取canvas元素
 var canvas = document.querySelector(selector)
 // 使用toDataURL方法將圖像轉換被base64編碼的URL字符串
 var url = canvas.toDataURL('image/png')
 // 生成一個a元素
 var a = document.createElement('a')
 // 創建一個單擊事件
 var event = new MouseEvent('click')
 
 // 將a的download屬性設置為我們想要下載的圖片名稱，若name不存在則使用‘下載圖片名稱’作為默認名稱
 a.download = name || '下載圖片名稱'
 // 將生成的URL設置為a.href屬性
 a.href = url
 
 // 觸發a的單擊事件
 a.dispatchEvent(event)
}
// 調用方式
// 參數一： 選擇器，代表canvas
// 參數二： 圖片名稱，可選
downloadCanvasIamge('canvas', '圖片名稱')

二、img 標簽版本

// 下載
function downloadIamge(selector, name) {
 // 通過選擇器獲取img元素
 var img = document.querySelector(selector)
 // 將圖片的src屬性作為URL地址
 var url = img.src
 var a = document.createElement('a')
 var event = new MouseEvent('click')
 
 a.download = name || '下載圖片名稱'
 a.href = url
 
 a.dispatchEvent(event)
}
// 調用方式
// 參數一： 選擇器，代表img標簽
// 參數二： 圖片名稱，可選
downloadIamge('canvas', '圖片名稱')

改進版

由于跨域會導致a標簽在部分瀏覽器中會直接打開新標簽頁，所以改進如下

function downloadIamge(selector, name) {
 var image = new Image()
 // 解決跨域 Canvas 污染問題
 image.setAttribute('crossOrigin', 'anonymous')
 image.onload = function () {
 var canvas = document.createElement('canvas')
 canvas.width = image.width
 canvas.height = image.height
 var context = canvas.getContext('2d')
 context.drawImage(image, 0, 0, image.width, image.height)
 var url = canvas.toDataURL('image/png')
 // 生成一個a元素
 var a = document.createElement('a')
 // 創建一個單擊事件
 var event = new MouseEvent('click')
 // 將a的download屬性設置為我們想要下載的圖片名稱，若name不存在則使用‘下載圖片名稱’作為默認名稱
 a.download = name || '下載圖片名稱'
 // 將生成的URL設置為a.href屬性
 a.href = url
 // 觸發a的單擊事件
 a.dispatchEvent(event)
}
image.src = document.querySelector(selector).src
}
// 調用方式
// 參數一： 選擇器，代表img標簽
// 參數二： 圖片名稱，可選
downloadIamge('canvas', '圖片名稱')

三、總結

我們主要使用的是a標簽的download屬性, 下面為MDN給出的說明：

此屬性指示瀏覽器下載URL而不是導航到URL，因此將提示用戶將其保存為本地文件。

如果屬性有一個值，它將在保存提示中用作預先填寫的文件名 (用戶仍然可以根據需要更改文件名)。對允許的值沒有限制，但是/和\被轉換為下劃線。大多數文件系統限制文件名中的一些標點符號，瀏覽器會相應地調整建議的名稱。

需要注意的地方：

此屬性僅適用于同源 URLs。

可以使用 blob: URLs 和 data: URLs 以方便用戶下載 JavaScript 方式生成的內容（例如使用在線繪圖的Web應用創建的照片）。

如果HTTP頭的Content-Disposition：存在，并且賦予了一個和這個屬性不同的文件名，HTTP頭優先于此屬性。

如果這個屬性存在 Content-Disposition 被設置為 inline，火狐優先 Content-Disposition，像之前文件名??的情況下，而Chrome則優先 download 屬性。

將網頁轉換為圖片，您可以使用一些庫和工具來實現。在前端開發中，常用的庫包括html2canvas和dom-to-image。這些庫允許您將HTML元素轉換為圖像。

下面是使用html2canvas庫將網頁轉換為圖像的示例代碼：

<!DOCTYPE html>  
<html>  
<head>  
  <title>Convert Webpage to Image</title>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>  
</head>  
<body>  
  <div id="capture">  
    <!-- 在這里放置您想要轉換為圖像的HTML內容 -->  
    <h1>Hello, World!</h1>  
    <p>This is an example of converting a webpage to an image.</p>  
  </div>  
  
  <button onclick="convertToImage()">Convert to Image</button>  
  
  <script>  
    function convertToImage() {  
      html2canvas(document.getElementById("capture")).then(canvas => {  
        var img = canvas.toDataURL("image/png");  
        var link = document.createElement("a");  
        link.href = img;  
        link.download = "webpage.png";  
        link.click();  
      });  
    }  
  </script>  
</body>  
</html>

上述代碼使用html2canvas庫來將id為"capture"的div元素轉換為圖像。當用戶點擊"Convert to Image"按鈕時，convertToImage()函數會被調用。該函數使用html2canvas對指定的HTML元素進行截圖，并將結果轉換為一個包含圖像數據的URL。然后，創建一個隱藏的鏈接元素，將圖像數據URL設置為鏈接的href屬性，并模擬點擊該鏈接以下載圖像。最后，圖像將以PNG格式下載到用戶的設備上。

請注意，html2canvas庫有一些限制和局限性，例如跨域圖像的限制、CSS樣式的復雜性等。確保在使用這些庫時仔細測試和驗證您的代碼，并查閱相關文檔以了解更多細節和選項。

秒get！用JS代碼下載公眾號封面圖片，簡單又高效！

大家好，今天給大家帶來一個非常實用的小技巧——如何使用一段JS代碼當做書簽來下載公眾號的封面圖片！是不是聽起來很高大上？其實操作起來非常簡單，看完這篇文章，你也能輕松搞定！

為什么要下載公眾號封面圖片？

先來說說為什么我們需要下載公眾號的封面圖片。作為一個公眾號運營者，或者一個公眾號文章的狂熱粉絲，有時候我們會看到一些非常精美的封面圖片，忍不住想要保存下來。

不僅可以用作素材，還可以欣賞這么漂亮的圖片嘛！然而，有些公眾號圖片沒有放到正文里面，也是不能直接右鍵保存的，這時候就需要一點小技巧啦！

硬核技術解析

別急，看到“技術”兩個字不要害怕，其實非常簡單！我們要用到一段JS代碼，這段代碼會在網頁上生成一個按鈕，點擊這個按鈕就能下載封面圖片。是不是聽起來很酷炫？

JS代碼的秘密

我不會把完整的代碼貼出來，直接講解一下它的原理：

1. 創建按鈕：首先，這段代碼會創建一個按鈕，樣式也很漂亮，綠色背景、白色文字，非常醒目。
2. 按鈕功能：當你點擊這個按鈕時，代碼會找到封面圖片的地址，然后下載圖片并保存到你的電腦上。

聽起來簡單吧？那我們就開始實際操作吧！

如何操作？

下面是具體的操作步驟，跟著做，保證你能成功！

第一步：將代碼保存為書簽

打開你的瀏覽器（這里我們以Chrome為例）。
在瀏覽器的書簽欄上點擊右鍵，選擇“添加網頁”。

給這個書簽取個名字，比如“下載公眾號封面”。
在“網址”一欄，粘貼上面的JS代碼：

javascript：(function(){var metaContentElement=document.getElementById('meta_content_hide_info');var newTag=document.createElement('span');newTag.style.position='initial';newTag.style.right='10px';newTag.style.top='10px';newTag.style.backgroundColor='#4CAF50';newTag.style.color='#fff';newTag.style.padding='5px';newTag.style.borderRadius='5px';newTag.style.cursor='pointer';newTag.style.fontSize='12px';newTag.textContent='下載封面圖片';newTag.onclick=function(){var ogImageMeta=document.querySelector('meta[property="og:image"]');var ogTitleMeta=document.querySelector('meta[property="og:title"]');if(ogImageMeta){var imageUrl=ogImageMeta.content;var fileName=getValidFileName(ogTitleMeta?ogTitleMeta.content:null);fetchAndDownloadImage(imageUrl,fileName);}else{alert('沒有找到og:image標簽');}};metaContentElement.parentNode.insertBefore(newTag,metaContentElement.nextSibling);function getValidFileName(ogTitle){if(ogTitle&&ogTitle.trim().length>0){return ogTitle.trim();}return'cover_image';}function fetchAndDownloadImage(url,fileName){fetch(url).then(response=>response.blob()).then(blob=>{const blobUrl=window.URL.createObjectURL(blob);const a=document.createElement('a');a.href=blobUrl;a.download=fileName;document.body.appendChild(a);a.click();document.body.removeChild(a);window.URL.revokeObjectURL(blobUrl);}).catch(error=>console.error('Error downloading image:',error));}})();

5. 點擊保存。

第二步：使用書簽下載封面圖片

打開你想要下載封面圖片的公眾號文章頁面。
點擊剛才保存的書簽。
頁面上會出現一個新的按鈕，寫著“下載封面圖片”。
點擊這個按鈕，封面圖片就會自動下載到你的電腦上了！

小結

怎么樣，是不是非常簡單？只需要幾步操作，你就能輕松下載公眾號的封面圖片了！這個小技巧不僅適合技術小白，也非常實用。下次看到喜歡的封面圖片，再也不用愁了！

希望這篇文章對你有幫助，趕快去試試吧！如果你覺得這個技巧有用，點贊就行，自己偷偷用！

在線咨詢

上一篇：吃了一年的SU，最好用的插件都在這了
下一篇：LEADTOOLS HTML5圖像教程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商