如何使用 JavaScript 將圖像轉換為 Base64 字符串？

Question

我需要將圖像轉換為 Base64 字符串，以便將圖像發送到服務器。

是否有任何 JavaScript 文件？ 否則，我該如何轉換它？

Answer 1

您可以選擇多種方法：

1.方法：文件閱讀器

通過XMLHttpRequest將圖像加載為 blob 並使用FileReader API ( readAsDataURL() ) 將其轉換為dataURL ：

 function toDataURL(url, callback) { var xhr = new XMLHttpRequest(); xhr.onload = function() { var reader = new FileReader(); reader.onloadend = function() { callback(reader.result); } reader.readAsDataURL(xhr.response); }; xhr.open('GET', url); xhr.responseType = 'blob'; xhr.send(); } toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) { console.log('RESULT:', dataUrl) })

此代碼示例也可以使用 WHATWG fetch API來實現：

 const toDataURL = url => fetch(url).then(response => response.blob()).then(blob => new Promise((resolve, reject) => { const reader = new FileReader() reader.onloadend = () => resolve(reader.result) reader.onerror = reject reader.readAsDataURL(blob) })) toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0').then(dataUrl => { console.log('RESULT:', dataUrl) })

這些方法：

• 缺乏瀏覽器支持

• 有更好的壓縮
• 也適用於其他文件類型

瀏覽器支持：

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

---

2.方法：Canvas

將圖像加載到 Image-Object 中，將其繪制到未污染的 canvas 並將 canvas 轉換回 dataURL。

 function toDataURL(src, callback, outputFormat) { var img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function() { var canvas = document.createElement('CANVAS'); var ctx = canvas.getContext('2d'); var dataURL; canvas.height = this.naturalHeight; canvas.width = this.naturalWidth; ctx.drawImage(this, 0, 0); dataURL = canvas.toDataURL(outputFormat); callback(dataURL); }; img.src = src; if (img.complete || img.complete === undefined) { img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; img.src = src; } } toDataURL( 'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) { console.log('RESULT:', dataUrl) } )

詳細地

支持的輸入格式：

image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx

支持的 output 格式：

image/png 、 image/jpeg 、 image/webp （鉻）

瀏覽器支持：

• http://caniuse.com/#feat=canvas

• Internet Explorer 10（Internet Explorer 10 僅適用於同源圖像）

---

3. 方法：來自本地文件系統的圖像

如果要從用戶文件系統轉換圖像，則需要采用不同的方法。 使用FileReader API ：

 function encodeImageFileAsURL(element) { var file = element.files[0]; var reader = new FileReader(); reader.onloadend = function() { console.log('RESULT', reader.result) } reader.readAsDataURL(file); }

 <input type="file" onchange="encodeImageFileAsURL(this)" />

Answer 2

您可以使用 HTML5 <canvas> ：

創建一個 canvas，將圖像加載到其中，然后使用toDataURL()獲取 Base64 表示（實際上，它是一個data: ZE6B391A8D2C4D45902A23A8B65864-en 編碼的圖像）。

Answer 3

該片段可以將您的字符串、圖像甚至視頻文件轉換為 Base64 字符串數據。

 <input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" /> <div id="imgTest"></div> <script type='text/javascript'> function encodeImageFileAsURL() { var filesSelected = document.getElementById("inputFileToLoad").files; if (filesSelected.length > 0) { var fileToLoad = filesSelected[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var srcData = fileLoadedEvent.target.result; // <--- data: base64 var newImage = document.createElement('img'); newImage.src = srcData; document.getElementById("imgTest").innerHTML = newImage.outerHTML; alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML); console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML); } fileReader.readAsDataURL(fileToLoad); } } </script>

Answer 4

基本上，如果您的圖像是

<img id='Img1' src='someurl'>

然后你可以像這樣轉換它

var c = document.createElement('canvas');
var img = document.getElementById('Img1');
c.height = img.naturalHeight;
c.width = img.naturalWidth;
var ctx = c.getContext('2d');

ctx.drawImage(img, 0, 0, c.width, c.height);
var base64String = c.toDataURL();

Answer 5

這是我所做的：

// Author James Harrington 2014
function base64(file, callback){
  var coolFile = {};
  function readerOnload(e){
    var base64 = btoa(e.target.result);
    coolFile.base64 = base64;
    callback(coolFile)
  };

  var reader = new FileReader();
  reader.onload = readerOnload;

  var file = file[0].files[0];
  coolFile.filetype = file.type;
  coolFile.size = file.size;
  coolFile.filename = file.name;
  reader.readAsBinaryString(file);
}

這就是你如何使用它

base64( $('input[type="file"]'), function(data){
  console.log(data.base64)
})

Answer 6

我發現最安全可靠的方法是使用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>

Answer 7

如果你有一個文件 object，這個簡單的 function 可以工作：

function getBase64 (file, callback) {

    const reader = new FileReader();

    reader.addEventListener('load', () => callback(reader.result));

    reader.readAsDataURL(file);
}

使用示例：

getBase64(fileObjectFromInput, function(base64Data){
    console.log("Base64 of file is", base64Data); // Here you can have your code which uses Base64 for its operation, // file to Base64 by oneshubh
});

Answer 8

這是您可以使用 Javascript Promise 的方法。

const getBase64 = (file) => new Promise(function (resolve, reject) {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => reject('Error: ', error);
})

現在，在事件處理程序中使用它。

const _changeImg = (e) => {
        const file = e.target.files[0];
        let encoded;
        getBase64(file)
          .then((result) => {
            encoded = result;
           })
          .catch(e => console.log(e))
    }

Answer 9

據我所知，可以通過 FileReader() 將圖像轉換為 Base64 字符串，或者將其存儲在 canvas 元素中，然后使用 toDataURL() 獲取圖像。 我有類似的問題，你可以參考這個。

將圖像轉換為已加載的 canvas

Answer 10

uploadProfile(e) {

    let file = e.target.files[0];
    let reader = new FileReader();

    reader.onloadend = function() {
        console.log('RESULT', reader.result)
    }
    reader.readAsDataURL(file);
}

Answer 11

您可以使用FileAPI ，但它幾乎不受支持。

Answer 12

試試這個代碼：

對於文件上傳更改事件，調用此 function：

$("#fileproof").on('change', function () {
    readImage($(this)).done(function (base64Data) { $('#<%=hfimgbs64.ClientID%>').val(base64Data); });
});

function readImage(inputElement) {
    var deferred = $.Deferred();

    var files = inputElement.get(0).files;

    if (files && files[0]) {
        var fr = new FileReader();
        fr.onload = function (e) {
            deferred.resolve(e.target.result);
        };
        fr.readAsDataURL(files[0]);
    } else {
        deferred.resolve(undefined);
    }

    return deferred.promise();
}

將 Base64 數據存儲在隱藏文件中以供使用。

Answer 13

我最終使用了返回function的function 。

 const getImg64 = async() => { const convertImgToBase64URL = (url) => { console.log(url) return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = () => { let canvas = document.createElement('CANVAS') const ctx = canvas.getContext('2d') canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); const dataURL = canvas.toDataURL(); canvas = null; resolve(dataURL) } img.src = url; }) } //for the demonstration purposes I used proxy server to avoid cross origin error const proxyUrl = 'https://cors-anywhere.herokuapp.com/' const image = await convertImgToBase64URL(proxyUrl+'https://image.shutterstock.com/image-vector/vector-line-icon-hello-wave-260nw-1521867944.jpg') console.log(image) } getImg64()

---

您可以在任何異步 function中使用此方法。 然后您可以await轉換后的圖像並繼續說明。

Answer 14

 document.querySelector('input').onchange = e => { const fr = new FileReader() fr.onloadend = () => document.write(fr.result) fr.readAsDataURL(e.target.files[0]) }

 <input type="file">

Answer 15

需要利用 reader 將 blob 轉換為 base64，更喜歡使用 async-await 語法，所以我選擇將 reader 邏輯提取到 helper 中，如下所示：

//* Convert resBlob to base64
export const blobToData = (blob: Blob) => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.readAsDataURL(blob)
  })
}

並在主代碼中使用 await 調用它：

//* Convert resBlob to dataUrl and resolve
const resData = await blobToData(resBlob)

Answer 16

好吧，如果您使用的是Dojo 工具包，它為我們提供了一種直接編碼或解碼為 Base64 的方法。

嘗試這個：

要使用 dojox.encoding.base64 對字節數組進行編碼：

var str = dojox.encoding.base64.encode(myByteArray);

要解碼 Base64 編碼的字符串：

var bytes = dojox.encoding.base64.decode(str);

Answer 17

如果您遇到 cors 原始錯誤，則有一個名為cors-fix的簡單代理將圖像加載到服務器上並將其作為緩沖區數組返回。

因此，我們可以使用 fetch 獲取圖像數據並使用 filereader 將其轉換為 dataUrl，如@HaNdTriX 所述。

  function toDataUrl(url) {
    fetch(`https://cors-fix.web.app/v1?url=${url}`)
    .then(data => data.blob().then(blob => {
      const reader = new FileReader();

      reader.onloadend = () =>  {
        console.log(reader.result);
      };

      reader.onerror = () => {
        console.log('reader error');
      };

      reader.readAsDataURL(blob);
    }));
  }

Answer 18

您還可以通過 ding 來簡單地提取 URL 的 base-64 部分：

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

Answer 19

假設您在瀏覽器中執行此操作：

等待：

import axios from 'axios'

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

配promise

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
  });

Answer 20

這很簡單。 1> 只需撥打 function 並傳遞您的圖像。 2> 保存返回值，在需要的地方使用。

//call like this
const convertedFile = await imageToBase64(fileObj);
console.log("convertedFile",convertedFile);

//this is the required function

 async function  imageToBase64(image) {
 const reader = new FileReader();
 reader.readAsDataURL(image);
 const data= await new Promise((resolve, reject) => {

   reader.onload = () => resolve(reader.result);

   reader.onerror = error => reject(error);

  });
return data;
}

export default imageToBase64;