如何從 JavaScript 中已載入的圖像中取得 Base64 編碼的圖像資料？-js教程-PHP中文網

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

Mary-Kate Olsen

發布： 2024-12-15 22:56:11

原創

622 人瀏覽過

How Can I Get Base64-Encoded Image Data from Already Loaded Images in JavaScript?

在JavaScript中擷取影像資料URL

問題：

問題：

Greasemonkey 和Firefox 的解決方案：

建立畫布：產生尺寸與影像的大小。
複製影像資料：利用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中文網其他相關文章！