使用 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+ 浏览量

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告