如何在 JavaScript 中取得圖像的資料 URL 而無需重新下載？

在JavaScript 中獲取圖像資料URL

此問題尋求一種方法來檢索已加載到圖像的資料URL使用JavaScript 的網頁，專門用於Firefox 的Greasemonkey 腳本。目的是取得影像的base64編碼內容，而不會產生再次下載的開銷。

解決方案：

1. 建立一個Canvas元素： 建立一個空的畫布元素，其尺寸與要匹配的圖像相尺寸匹配
2. 複製影像資料：使用“drawImage”函數將影像資料複製到畫布元素上。此步驟假設圖像已完全載入。
3. 取得資料 URL： 利用「toDataURL」函數來擷取所需格式的資料 URL，可以是PNG 或 JPEG。提供的解決方案使用 RegExp 僅從資料 URL 中提取 base64 編碼的內容。

注意：

a。此方法僅在圖片與網頁寄存在同一網域中時有效。
b.產生的圖像是重新編碼的版本，而不是原始檔案的精確副本。
c.提供的 JavaScript 程式碼假定 Greasemonkey 環境。

以上是如何在 JavaScript 中取得圖像的資料 URL 而無需重新下載？的詳細內容。更多資訊請關注PHP中文網其他相關文章！