Jak mogę przekonwertować obraz na ciąg Base64 przy użyciu JavaScript?

Istnieje kilka podejść, które możesz zastosować:

1. Podejście: FileReader
>
Załaduj obraz jako obiekt blob za pośrednictwem

XMLHttpRequest
https://developer.mozilla.org/ ... quest
I użyć

FileReader API
https://developer.mozilla.org/ ... eader
aby przekonwertować go na

dataURL
https://developer.mozilla.org/ ... _URIs
:
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">

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)

})

Ten przykład kodu można również zaimplementować za pomocą funkcji WHATWG

fetch API
https://developer.mozilla.org/ ... Fetch
:
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">

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)

 })

Wymienione podejścia

:

• brak obsługi przeglądarki
• mają lepszą kompresję
• działa również dla innych typów plików

obsługa przeglądarki

:

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

2. Podejście: płótno
>
Załaduj obraz do obiektu graficznego, pomaluj go na czystym płótnie i przekonwertuj go z powrotem na dataURL.
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">

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)

 })

Szczegółowo
https://gist.github.com/HaNdTriX/7704632

Obsługiwane formaty wejściowe

:

image/png

,

image/jpeg

,

image/jpg

,

image/gif

,

image/bmp

,

image/tiff

,

image/x-icon

,

image/svg+xml

,

image/webp

,

image/xxx

Obsługiwane formaty wyjściowe

:

image/png

,

image/jpeg

,

image/webp

(chrome)

obsługa przeglądarki

:

• http://caniuse.com/#feat=canvas http://caniuse.com/#feat=canvas
• Internet Explorer 10 (Internet Explorer 10 działa tylko z tymi samymi oryginalnymi obrazami)

3. podejście: obrazy z lokalnego systemu plików
>
Jeśli chcesz konwertować obrazy z systemu plików użytkowników, musisz zastosować inne podejście.
Posługiwać się

FileReader API
https://developer.mozilla.org/ ... eader
:
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">

function encodeImageFileAsURL(element) {

 var file = element.files[0];

 var reader = new FileReader();

 reader.onloadend = function() {

 console.log('RESULT', reader.result)

 }

 reader.readAsDataURL(file);

}

<pre class="snippet-code-html lang-html prettyprint-override">

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

W tym celu możesz użyć

& < canvas & >

HTML5:
Utwórz płótno, załaduj do niego obraz, a następnie użyj

toDataURL()

https://developer.mozilla.org/ ... ement
aby uzyskać reprezentację Base64 (właściwie adres URL

data:

, ale zawiera obraz zakodowany w formacie Base64).

Ten fragment kodu może konwertować ciągi znaków, obrazy, a nawet pliki wideo na dane ciągu Base64.
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js">
<pre class="snippet-code-html lang-html prettyprint-override">

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();"/>

<div id="imgTest">

<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.resu<// <--- 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>

Zasadniczo, jeśli twój obraz

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

wtedy możesz to przekonwertować w ten sposób

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

Oto co zrobiłem:

// 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 tak tego używasz

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

 console.log(data.base64)

})

Odkryłem, że najbezpieczniejszym i najbardziej niezawodnym sposobem jest użycie

FileReader ()

.
Próbny:

obrazy do Base64
https://codverter.com/src/webe ... 97b68

<!DOCTYPE html>

<html>

 <head>

 <meta charset="UTF-8">

 </head>

 <body>

 <input id="myinput" type="file" onchange="encode();"/>

 <div id="dummy">

 

 <div>

 <textarea style="width:100%;height:500px;" id="txt">

 </textarea>

 

 <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.resu<

 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>

Jeśli masz obiekt plikowy, zadziała ta prosta funkcja:

function getBase64 (file, callback) { const reader = new FileReader(); reader.addEventListener('load', () => callback(reader.result)); reader.readAsDataURL(file);

}

Przykład użycia:

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

});

możesz użyć

FileAPI
http://www.w3.org/TR/FileAPI/
ale praktycznie nie jest obsługiwany.

O ile wiem, obraz można przekonwertować na ciąg Base64 za pomocą FileReader () lub można go zapisać w elemencie canvas, a następnie użyć toDataURL (), aby uzyskać obraz. Miałem podobny problem, do którego możesz się odnieść.

Konwersja obrazu do już załadowanego płótna

https://coderoad.ru/26212792/

Wypróbuj ten kod:
W przypadku zdarzenia zmiany przesyłania pliku wywołaj tę funkcję:

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

}

Przechowuj dane Base64 w ukrytym pliku do użytku.

uploadProfile(e) { let file = e.target.files[0];

 let reader = new FileReader(); reader.onloadend = function() {

 console.log('RESULT', reader.result)

 }

 reader.readAsDataURL(file);

}

W ten sposób możesz sobie poradzić z obietnicą Javascript.

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

})

Teraz użyj go w swoim programie obsługi zdarzeń.

const _changeImg = (e) => {

 const file = e.target.files[0];

 let encoded;

 getBase64(file)

 .then((result) => {

 encoded = resu<

 })

 .catch(e => console.log(e))

 }

Cóż, jeśli używasz

przybory
https://en.wikipedia.org/wiki/Dojo_Toolkit
Dojo, to daje nam prosty sposób na kodowanie lub dekodowanie Base64.
Spróbuj tego:
Do kodowania tablicy bajtów służy Dojox.encoding.base64:

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

Aby zdekodować ciąg zakodowany w Base64:

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