Cara convert gambar menjadi base64 string menggunakan javascript

Saya perlu untuk mengkonversi gambar ke base64 string sehingga saya dapat mengirim gambar ke server. Apakah ada file js ini... ? Lain bagaimana cara mengubahnya

Pemrograman
javascript base64
27 Mei 2011 в 9:26
308 tayangan
Mengomentari pertanyaan (3)

Ada beberapa pendekatan yang dapat anda pilih:

1. Pendekatan: FileReader

Memuat 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 bisa diimplementasikan dengan menggunakan WHATWG mengambil 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 ini:

  • kurangnya dukungan browser
  • memiliki kompresi yang lebih baik
  • bekerja untuk jenis file lainnya serta

Browser Yang Mendukung:

2. Pendekatan: Canvas

Memuat gambar ke Gambar-Objek, cat untuk non tercemar kanvas dan mengkonversi kanvas kembali ke 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)
  }
)

detail

Format input yang didukung:

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

Format output yang didukung:

image/png, image/jpeg, gambar/webp(chrome)

Browser Yang Mendukung:

3. Pendekatan: Gambar dari sistem file lokal

Jika anda ingin mengkonversi gambar dari pengguna sistem file yang anda butuhkan untuk mengambil pendekatan yang berbeda. Gunakan 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)" />
HaNdTriX
Jawaban edit 2 Juli 2017 в 9:59
Komentar (37)
Larutan

Anda dapat menggunakan HTML5 <kanvas> untuk itu:

Membuat kanvas, memuat gambar anda ke dalamnya dan kemudian gunakan toDataURL() untuk mendapatkan base64 representasi (sebenarnya, itu's data: URL tapi mengandung base64-encoded image).

Komentar (7)

Cuplikan ini dapat mengkonversi string, gambar, dan bahkan file video ke Base64 string data.


<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; //
Carles Alcolea
Jawaban edit 16 Maret 2019 в 4:24
Komentar (3)

Pada dasarnya, jika gambar anda

kemudian 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();
Paul Clark
Jawaban edit 28 Januari 2019 в 10:58
Komentar (2)

Berikut adalah apa 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 di sini adalah bagaimana anda menggunakannya

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

Anda bisa menggunakan FileAPI, tapi itu's cukup banyak didukung.

Komentar (0)

Jika anda memiliki file objek fungsi sederhana ini akan bekerja:-

function getBase64 (file,callback) {

    const reader = new FileReader();

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

    reader.readAsDataURL(file);
}

Pemakaian Ex:-

getBase64(fileObjectFromInput, function(base64Data){
    console.log("base 64 of file is",base64Data);//here you can have your code which uses base64 for its operation,//file to base64 by oneshubh
});
Shubham
Jawaban edit 17 Januari 2019 в 9:07
Komentar (0)

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

Demo: Gambar untuk Base64 




    <meta charset="UTF-8">


    <input id="myinput" type="file" onchange="encode();" />
    <div id="dummy">
    </div>
    <div>
      <textarea style="width:100%;height:500px;" id="txt">
       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>
jonathana
Jawaban edit 17 Mei 2019 в 2:21
Komentar (0)

Sejauh yang saya tahu gambar dapat dikonversi menjadi base64 string baik oleh FileReader() atau menyimpannya dalam elemen kanvas dan kemudian menggunakan toDataURL() untuk mendapatkan gambar.Aku punya simmilar jenis masalah yang anda bisa lihat ini.

https://stackoverflow.com/questions/26212792/convert-an-image-to-canvas-that-is-already-loaded/26554277#26554277

Komentar (0)

Coba kode Ini

Upload File Chnage acara bmemanggil fungsi ini

  $("#fileproof").on('change', function () {
                readImage($(this)).done(function (base64Data) { $('#').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();
}

Toko base64data di tersembunyi diajukan untuk digunakan.

ravi polara
Jawaban edit 23 Januari 2019 в 4:44
Komentar (1)

Nah, jika anda menggunakan dojo, ini memberi kita cara langsung untuk encode atau decode ke dalam base64.

Coba ini:

Untuk menyandikan sebuah array dari byte menggunakan dojox.encoding.base64:

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

Untuk decode base64-encoded string:

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