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

开启你的 职业生涯

完成课程并获得认证

开始
广告