如何使用JavaScript将图像转换为Base64字符串?

我需要将我的图像转换为Base64字符串，这样我就可以将我的图像发送到服务器。

有JavaScript文件吗?否则，我如何转换它?

当前回答

你可以使用HTML5 <canvas>:

创建一个画布，将图像加载到其中，然后使用toDataURL()来获得Base64表示(实际上，它是一个data: URL，但它包含Base64编码的图像)。

2011-05-27 09:36:11

其他回答

我最终使用了一个返回Promise的函数。

你可以在任何异步函数中使用这种方法。然后，您只需等待转换后的图像并继续执行指示即可。

2020-12-21 22:57:50

我发现最安全可靠的方法是使用FileReader()。

演示:映像到Base64

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <input id="myinput" type="file" onchange="encode();" />
    <div id="dummy">
    </div>
    <div>
      <textarea style="width:100%;height:500px;" id="txt">
      </textarea>
    </div>
    <script>
      function encode() {
        var selectedfile = document.getElementById("myinput").files;
        if (selectedfile.length > 0) {
          var imageFile = selectedfile[0];
          var fileReader = new FileReader();
          fileReader.onload = function(fileLoadedEvent) {
            var srcData = fileLoadedEvent.target.result;
            var newImage = document.createElement('img');
            newImage.src = srcData;
            document.getElementById("dummy").innerHTML = newImage.outerHTML;
            document.getElementById("txt").value = document.getElementById("dummy").innerHTML;
          }
          fileReader.readAsDataURL(imageFile);
        }
      }
    </script>
  </body>
</html>

更新-相同的代码与评论@AnniekJ请求:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <input id="myinput" type="file" onchange="encode();" />
    <div id="dummy">
    </div>
    <div>
      <textarea style="width:100%;height:500px;" id="txt">
      </textarea>
    </div>
    <script>
      function encode() {
        // Get the file objects that was selected by the user from myinput - a file picker control
        var selectedfile = document.getElementById("myinput").files;
        // Check that the user actually selected file/s from the "file picker" control
        // Note - selectedfile is an array, hence we check it`s length, when length of the array
        // is bigger than 0 than it means the array containes file objects
        if (selectedfile.length > 0) {
          // Set the first file object inside the array to this variable
          // Note: if multiple files are selected we can itterate on all of the selectedfile array  using a for loop - BUT in order to not make this example complicated we only take the first file object that was selected
          var imageFile = selectedfile[0];
          // Set a filereader object to asynchronously read the contents of files (or raw data buffers) stored on the            user's computer, using File or Blob objects to specify the file or data to read. 
          var fileReader = new FileReader();
          // We declare an event of the fileReader class (onload event) and we register an anonimous function that will be executed when the event is raised. it is "trick" we preapare in order for the onload event to be raised after the last line of this code will be executed (fileReader.readAsDataURL(imageFile);) - please read about events in javascript if you are not familiar with "Events" 
          fileReader.onload = function(fileLoadedEvent) {
            // AT THIS STAGE THE EVENT WAS RAISED
            // Here we are getting the file contents - basiccaly the base64 mapping
            var srcData = fileLoadedEvent.target.result;
            // We create an image html element dinamically in order to display the image
            var newImage = document.createElement('img');
            // We set the source of the image we created
            newImage.src = srcData;
            // ANOTHER TRICK TO EXTRACT THE BASE64 STRING
            // We set the outer html of the new image to the div element
            document.getElementById("dummy").innerHTML = newImage.outerHTML;
            // Then we take the inner html of the div and we have the base64 string
            document.getElementById("txt").value = document.getElementById("dummy").innerHTML;
          }
          // This line will raise the fileReader.onload event - note we are passing the file object here as an argument to the function of the event  
          fileReader.readAsDataURL(imageFile);
        }
      }
    </script>
  </body>
</html>

2019-05-17 06:29:41

假设您在浏览器中执行此操作:

等待:

import axios from 'axios'

const response = await axios.get(url, { responseType: 'blob' });
return window.URL.createObjectURL(response.data);

与承诺

import axios from 'axios'

const response = await axios.get(url, { responseType: 'blob' })
  .then((response) => {
    const dataUrl = window.URL.createObjectURL(response.data);
    // do something with your url
  });

2022-09-08 08:07:20

你也可以简单地提取以64为基数的URL的一部分:

var Base64URL = canvas.toDataURL('image/webp')
var Base64 = Base64URL.split(",")[1] //Returns the base64 part

2022-02-10 06:05:25

有多种方法可供选择:

1. 方法:FileReader

通过XMLHttpRequest加载图像为blob，并使用FileReader API (readAsDataURL())将其转换为dataURL:

函数toDataURL(url，回调){ var xhr = new XMLHttpRequest(); xhr。Onload = function() { var reader = new FileReader(); 读者。Onloadend = function() { 回调(reader.result); ｝ reader.readAsDataURL (xhr.response); }; xhr。打开(‘得到’,url); xhr。responseType = 'blob'; xhr.send (); ｝ toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0'，函数(dataUrl) { dataUrl console.log('结果:') })

这个代码示例也可以使用WHATWG获取API来实现:

const toDataURL => .then(response => response.blob()) .then(blob => new Promise((resolve, reject) => { const reader = new FileReader() 读者。Onloadend = () => resolve(reader.result) 读者。Onerror =拒绝 reader.readAsDataURL (blob) })) toDataURL(“https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0”) .then(dataUrl => { dataUrl console.log('结果:') })

这些方法:

有更好的压缩也适用于其他文件类型

浏览器支持:

http://caniuse.com/#feat=filereader http://caniuse.com/#feat=fetch

2. 方法:Canvas(适用于旧浏览器)

将图像加载到image - object中，将其绘制到未受污染的画布上，并将画布转换回dataURL。

详细

支持的输入格式:

图像/PNG，图像/JPEG，图像/JPG，图像/gif，图像/BMP，图像/tiff，图像/x-icon，图像/SVG+XML，图像/WebP，图像/XXX

支持的输出格式:

图像/PNG，图像/JPEG，图像/WebP（Chrome）

浏览器支持:

http://caniuse.com/#feat=canvas Internet Explorer 10 (Internet Explorer 10只能处理相同来源的图像)

3.方法:来自本地文件系统的映像

如果您想从用户文件系统转换映像，则需要采用不同的方法。使用FileReader API:

函数encodeImageFileAsURL(element) { Var file = element.files[0]; var reader = new FileReader(); 读者。Onloadend = function() { console.log(“结果”,reader.result) ｝ reader.readAsDataURL(文件); ｝ <input type="file" onchange="encodeImageFileAsURL(this)"/>

2013-11-29 11:46:10

如何使用JavaScript将图像转换为Base64字符串?

推荐文章

最新文章

标签