Cum pot converti o imagine în șir Base64 folosind JavaScript? (Programare, Javascript, Base64)

Coder_sLaY a intrebat.

Am nevoie să convertesc imaginea mea într-un șir Base64 pentru a putea trimite imaginea mea către un server.

Există vreun fișier JavaScript pentru acest lucru? În caz contrar, cum pot să o convertesc?

Comentarii

  • De unde provine imaginea dumneavoastră? –  > Por TJHeuvel.
  • stackoverflow.com/questions/934012/get-image-data-in-javascript –  > Por duri.
  • JS și jQ: stackoverflow.com/questions/17710147/… –  > Por Roko C. Buljan.
  • idkblogs.com/js/31/Convert-image-file-into-base64-in-javascript –  > Por Shubham Verma.
16 răspunsuri
ThiefMaster

Puteți utiliza HTML5 <canvas> pentru aceasta:

Creați o pânză, încărcați imaginea dvs. în ea și apoi utilizați toDataURL() pentru a obține reprezentarea Base64 (de fapt, este un data: URL, dar conține imaginea codificată Base64).

Comentarii

  • Are toDataURL oferă control asupra callback-urilor, cum ar fi done/fail/always așa cum este cazul pentru xhr? –  > Por Jeroen.
  • Putem extrage 2 sau mai multe pânze ca un singur PNG? –  > Por techie_28.
  • 203

  • Poți te rog să faci un jsbin sau cel puțin să scrii niște cod aici? –  > Por vsync.
  • Această abordare eșuează în cazul încălcării CORS. În afară de asta, această soluție ar trebui să răspundă la întrebare. –  > Por Revanth Kumar.
  • știm cu toții că transformarea binarului în base64 necesită mai multe date, dar utilizarea canvas în acest mod pentru a obține base64 poate crește și mai mult dacă nu folosiți reader.readAsDataURL deoarece, probabil, veți pierde, de asemenea, toată compresia imaginii atunci când utilizați toDataURL. asta dacă nu doriți ca fiecare imagine să fie convertită într-un format specific. atunci când utilizați canvas, pierdeți și toate metadatele, cum ar fi: EXIF, rotația, camera, geolocalizarea etc.  > Por Fără sfârșit.
HaNdTriX

Există mai multe abordări din care puteți alege:

1. Abordare: FileReader

Încărcați imaginea ca blob prin intermediul XMLHttpRequest și se utilizează API FileReader (readAsDataURL()) pentru a-l converti într-un fișier dataURL:

Acest exemplu de cod ar putea fi implementat, de asemenea, utilizând WHATWG fetch API:

Aceste abordări:

  • nu au suport în browser
  • au o compresie mai bună
  • funcționează și pentru alte tipuri de fișiere

Suport pentru browser:


2. Abordare: Canvas

Încărcați imaginea într-un Image-Object, pictați-o pe o pânză nepătată și convertiți înapoi pânza într-un dataURL.

În detaliu

Formate de intrare acceptate:

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

Formate de ieșire acceptate:

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

Suport pentru browsere:


3. Abordare: Imagini din sistemul local de fișiere

Dacă doriți să convertiți imagini din sistemul de fișiere al utilizatorilor, trebuie să adoptați o abordare diferită.utilizați funcția FileReader API:

Comentarii

    63

  • Nu funcționează în Chrome pentru mine: Image from origin **** has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access. –  > Por DickieBoy.
  • Doar în cazul în care acest lucru împiedică pe altcineva, această rutină include antetul „data:image/jpg;base64,” în șirul pe care îl returnează, așa că nu este nevoie să adăugați asta. –  > Por Chris Rae.
  • Warnin2: ceva se încurcă cu conținutul. undeva pe parcurs, există o șansă ca datele să fie corupte/alterate (chiar dacă, poate nu cu mult), cel puțin asta se întâmplă pentru mine pe firefox 35 pe unele imagini, base64 este diferit de base64 pe care php îl creează pe aceeași imagine. –  > Por hanshenrik.
  • Da, așa este. Unele date s-ar putea să se piardă, deoarece noi desenăm de fapt imaginea pe un Element canvas (developer.mozilla.org/en-US/docs/Web/API/…) și apoi o convertim într-un dataURL (developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/…). –  > Por HaNdTriX.
  • Abordare: FileReader (2) funcționează mai rapid decât abordarea Canvas. Testat pe fotografii mari. Sper că va fi de ajutor pentru cineva. –  > Por Max.
utilizator1801972

Acest fragment poate converti șirul de caractere, imaginea și chiar fișierul video în date de șir Base64.

Comentarii

  • Nu numai că este grozav, dar acest lucru ocolește și problema originii crossdomain! Cu aceasta, puteți permite utilizatorilor să furnizeze propriile imagini sau imagini de la un URL (deoarece Windows le va prelua singur), să le deseneze pe pânză și să lucreze cu ele, putând în același timp să folosească .toDataURL() etc. Vă mulțumim mult! –  > Por ElDoRado1239.
  • Bună ziua, cum se poate aplica acest lucru la o imagine încărcată de la o adresă URL de la distanță fără a se confrunta cu probleme de cross domain? Mulțumesc –  > Por guthik.
  • Acest lucru funcționează uneori în Chrome 78.0.3904.97, dar alteori se blochează fila. –  > Por Dshiz.
mehmet mecek

În principiu, dacă imaginea dvs.

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

atunci o puteți converti ca

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

Comentarii

  • Din păcate, acest lucru va funcționa doar pentru imagini locale, dacă încercați să utilizați o imagine de la distanță (alegeți una de pe web), se scrie acest lucru în consola (firefox): „SecurityError: Operațiunea este nesigură’. –  > Por user2677034.
  • Este posibil să funcționeze pe alte imagini, dar depinde de setările CORS ale site-ului respectiv și trebuie să fie specificate ca <img id='Img1' src='someurl' crossorigin='anonymous'> –  > Por Mike.
  • În Firefox puteți dezactiva temporar această securitate. Mergeți la „about:config” și modificați proprietatea „privacy.file_unique_origin” la false –  > Por Manuel Romeiro.
James Harrington

Iată ce am făcut eu:

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

Și iată cum se utilizează

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

Comentarii

  • Ce este btoa? 🙂 –  > Por Alexander Mills.
  • a = ASCII și b = Binary stackoverflow.com/questions/33854103/… –  > Por James Harrington.
jonathana

Am descoperit că cel mai sigur și mai fiabil mod de a face acest lucru este de a utiliza FileReader().

Demo: Imagine în 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>

UPDATE – Același cod cu comentarii pentru cererea lui @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>

Comentarii

  • Bună, căutam o modalitate de a converti imaginile din Powerpoint AddIn-ul meu în base64 (pentru că altfel nu le pot adăuga în slide-uri) și am găsit răspunsul tău. Ați putea să-mi explicați poate un pic mai mult ce faceți aici? Sunt destul de nou în acest domeniu, așa că nu prea înțeleg întregul FileReader. Doar pentru a oferi câteva informații de fond: Am un șir selectedImages, care sunt .png-uri, și vreau să le convertesc în fișiere base64 și apoi să le pot adăuga la un diapozitiv powerpoint. –  > Por AnniekJ.
  • @AnniekJ vă rog să vedeți răspunsul meu actualizat cu comentariul de deasupra fiecărei linii de cod –  > Por jonathana.
Shubham

Dacă aveți un obiect de fișier, această funcție simplă va funcționa:

function getBase64 (file, callback) {

    const reader = new FileReader();

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

    reader.readAsDataURL(file);
}

Exemplu de utilizare:

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

Artem Tikhomirov

Ați putea folosi FileAPI, dar este destul de puțin suportată.

Bhuwan Adhikari

Iată modul în care puteți face cu 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);
})

Acum, utilizați-o în gestionarul de evenimente.

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

Comentarii

  • dacă doriți doar să schimbați imaginea pentru previzualizare, utilizați URL.createObjectURL(file) în loc de –  > Por Endless.
Ajeet Lakhani

Din câte știu eu, o imagine poate fi convertită într-un șir Base64 fie prin FileReader(), fie prin stocarea acesteia în elementul canvas și apoi utilizați toDataURL() pentru a obține imaginea. Am avut o problemă similară la care vă puteți referi.

Conversia unei imagini în canvas care este deja încărcată

ravi polara

Încercați acest cod:

Pentru un eveniment de modificare a încărcării unui fișier, apelați această funcție:

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

Stocați datele Base64 în fișierul ascuns pentru a le utiliza.

Comentarii

  • Bună, Ravi! Văd că ești relativ nou. Cu excepția cazului în care posterul original cere în mod specific o soluție de bibliotecă, cum ar fi jQuery, lodash și așa mai departe, este mai bine pentru toată lumea să răspundă folosind minimul necesar, în acest caz, javascript simplu. Dacă doriți în continuare să contribuiți cu jQuery, vă rugăm să precizați foarte clar acest lucru în intrarea dvs. 🙂 –  > Por Carles Alcolea.
Mahedi Hasan Durjoy
uploadProfile(e) {

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

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

井上智文

Maduekwe Pedro

Am avut nevoie de un cititor pentru a converti blob-ul în baza64, prefer să folosesc sintaxa async-await, așa că am ales să extrag logica cititorului în acest ajutor:

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

și să o sun folosind await în codul principal:

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

Jakub A Suplicki

Am sfârșit prin a folosi un function care returnează un Promise.


Puteți utiliza această abordare în orice funcție asincronă. Apoi, puteți doar await pentru imaginea convertită și să continuați cu instrucțiunile.

Vikash Pandey

Ei bine, dacă folosiți Dojo Toolkit, acesta ne oferă o modalitate directă de a codifica sau decodifica în Base64.

Încercați acest lucru:

Pentru a codifica o matrice de octeți folosind dojox.encoding.base64:

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

Pentru a decoda un șir codificat în Base64:

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

Comentarii

  • @DownVoter – Dragă, este mai bine să subliniezi eroarea, de asemenea, dacă marchezi ceva negativ. astfel încât cineva să se poată îmbunătăți. în măsura în care înțeleg dojo în, de asemenea, o bibliotecă JavaScript, atunci dacă vi se permite să utilizați dojo, puteți utiliza cu siguranță această abordare. –  > Por Vikash Pandey.