使用 JavaScript 將影像轉換為 Base64 資料 URL

JavaScript 有一種將影像 URL 或本地 PC 影像轉換為 base64 字串的約定。此字串可以包含各種符號和字母。這裡解釋瞭如何建立畫布元素，將影像載入到其中，以及使用 toDataURL 顯示字串表示形式。為了獲得 base64 字串表示形式，我們還將使用檔案讀取器選項。

在這種情況下，它被建立為一個畫布元素，並將指定其尺寸。儲存字串表示形式的 dataURL。我們將新增來自線上資源的隨機影像並確保物件以避免安全問題。'Anonymous' 作為 crossOrigin 最後，我們的回撥函式將 dataURL 傳遞給 toDataURL 函式，以通知視窗相應影像的 base64 字串已準備好進行預覽。

示例 1

以下示例嘗試在 JavaScript 中將影像轉換為 Base64 資料 URL：

<!DOCTYPE html>
<html>
<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>Get URL i</title>
</head>
<body>
   <img src="https://images.unsplash.com/photo-1606115915090-be18fea23ec7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" id="myImg">
   <script>
      function toDataURL(src, callback){
         var image = new Image();
         image.crossOrigin = 'Anonymous';
         image.onload = function(){
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            canvas.height = this.naturalHeight;
            canvas.width = this.naturalWidth;
            context.drawImage(this, 0, 0);
            var dataURL = canvas.toDataURL('image/jpeg');
            callback(dataURL);
         };
         image.src = src;
      }
      toDataURL('https://images.unsplash.com/photo-1606115915090-be18fea23ec7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80', function(dataURL){
         alert(dataURL);
      })
   </script>
</body>
</html>

示例 2

以下是一個將影像轉換為 URL 的示例：

<!DOCTYPE html>
<html>
<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>Get URL i</title>
   <script>
      var base64String = "";
      function Uploaded() {
         var file = document.querySelector(
            'input[type=file]')['files'][0];
         var reader = new FileReader();
         reader.onload = function () {
            base64String = reader.result.replace("data:", "")
            .replace(/^.+,/, "");
            imageBase64Stringsep = base64String;
         }
         reader.readAsDataURL(file);
      }
      function display() {
         console.log("Base64String about to be printed");
         alert(base64String);
      }
   </script>
</head>
<body>
   <input type="file" name="" id="fileId" onchange="Uploaded()">
   <br><br>
   <button onclick="display()">
      Display String
   </button>
</body>
</html>

更新於: 2022年8月26日

11K+ 瀏覽量

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.