使用 JavaScript 將影像轉為資料 URI

JavaScript 採用了一個慣例，將影像 URL 或本地 PC 影像轉換成 base64 字串。該字串可以包含各種符號和字母。這裡解釋瞭如何製作畫布元素、向其中載入影像，並使用 toDataURL() 來顯示字串表示形式。為獲得 base64 字串表示形式，我們還將使用檔案讀取器選項。

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

示例

此示例演示如何在 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>

更新於: 26-Aug-2022

12K+ 瀏覽量

開啟你的 職業生涯

完成課程並獲得認證

開始
廣告