如何從 JavaScript 中已載入的圖像中取得 Base64 編碼的圖像資料？

在JavaScript中擷取影像資料URL

問題：

問題：

Greasemonkey 和Firefox 的解決方案：

要使用Greasemonkey 和Firefox 提取完全載入的映像的內容，請執行以下步驟：
2. 建立畫布：產生尺寸與影像的大小。
3. 複製影像資料：利用drawImage函數將影像資料傳送到畫布。

取得資料URL：

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

使用toDataURL 函數從canvas.

注意：此解決方案假設圖像資料可從與頁面相同的網域中獲得，或在伺服器支援下啟用了crossOrigin="anonymous" 屬性CORS。此外，返回的圖像可能會被重新編碼。

以上是如何從 JavaScript 中已載入的圖像中取得 Base64 編碼的圖像資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！