Bagaimana saya bisa mengubah gambar menjadi string Base64 menggunakan JavaScript?

Saya perlu mengkonversi gambar saya ke string Base64 sehingga saya dapat mengirim gambar saya ke server.

Apakah ada file JavaScript untuk ini? Lain, bagaimana saya bisa mengubahnya?

Anda dapat menggunakan HTML5 <canvas>untuk itu:

Buat kanvas, muat gambar Anda ke dalamnya dan kemudian gunakan toDataURL()untuk mendapatkan representasi Base64 (sebenarnya, itu adalah data:URL, tetapi berisi gambar yang disandikan Base64).

Ada beberapa pendekatan yang dapat Anda pilih:

1. Pendekatan: FileReader

Muat gambar sebagai gumpalan melalui XMLHttpRequest dan gunakan FileReader API untuk mengubahnya menjadi 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)
})

Contoh kode ini juga dapat diimplementasikan menggunakan 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)
  })

Pendekatan-pendekatan ini:

• kurangnya dukungan browser
• memiliki kompresi yang lebih baik
• bekerja untuk jenis file lain juga

Dukungan Browser:

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

2. Pendekatan: Kanvas

Masukkan gambar ke dalam Image-Object, cat ke kanvas yang tidak dicat dan ubah kembali kanvas menjadi 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)
  }
)

Secara terperinci

Format input yang didukung:

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

Format output yang didukung:

image/png, image/jpeg, image/webp(Krom)

Dukungan Browser:

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

• Internet Explorer 10 (Internet Explorer 10 hanya berfungsi dengan gambar asal yang sama)

3. Pendekatan: Gambar dari sistem file lokal

Jika Anda ingin mengonversi gambar dari sistem file pengguna, Anda perlu mengambil pendekatan yang berbeda. Gunakan API FileReader :

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)" />

Cuplikan ini dapat mengonversi file string, gambar, dan bahkan video Anda menjadi data string 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>

Pada dasarnya, jika gambar Anda

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

maka Anda dapat mengubahnya seperti

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

Inilah yang saya lakukan:

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

Dan inilah cara Anda menggunakannya

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

Saya menemukan bahwa cara paling aman dan dapat diandalkan untuk melakukannya adalah menggunakan FileReader().

Demo: Gambar ke 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>

Jika Anda memiliki objek file, fungsi sederhana ini akan berfungsi:

function getBase64 (file, callback) {

    const reader = new FileReader();

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

    reader.readAsDataURL(file);
}

Contoh penggunaan:

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

Anda bisa menggunakan FileAPI , tetapi itu tidak banyak didukung.

Sejauh yang saya tahu, gambar dapat dikonversi menjadi string Base64 baik oleh FileReader () atau menyimpannya di elemen kanvas dan kemudian menggunakan toDataURL () untuk mendapatkan gambar. Saya punya masalah serupa yang bisa Anda rujuk.

Konversi gambar ke kanvas yang sudah dimuat

Coba kode ini:

Untuk acara perubahan unggahan file, panggil fungsi ini:

$("#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();
}

Menyimpan data Base64 dalam arsip tersembunyi untuk digunakan.

uploadProfile(e) {

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

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

Nah, jika Anda menggunakan Dojo Toolkit , itu memberi kami cara langsung untuk menyandikan atau mendekode ke Base64.

Coba ini:

Untuk menyandikan larik byte menggunakan dojox.encoding.base64:

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

Untuk memecahkan kode string yang disandikan Base64:

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