Preciso converter minha imagem em uma string Base64 para poder enviar minha imagem para um servidor.
Existe algum arquivo JavaScript para isso? Senão, como posso convertê-lo?
Preciso converter minha imagem em uma string Base64 para poder enviar minha imagem para um servidor.
Existe algum arquivo JavaScript para isso? Senão, como posso convertê-lo?
Respostas:
Você pode usar o HTML5 <canvas>
para isso:
Crie uma tela, carregue sua imagem nela e use-a toDataURL()
para obter a representação Base64 (na verdade, é uma data:
URL, mas contém a imagem codificada em Base64).
toDataURL
controle sobre os retornos de chamada, done/fail/always
como é o caso do xhr?
Você pode escolher entre várias abordagens:
Carregue a imagem como blob via XMLHttpRequest e use a API FileReader para convertê-la em 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)
})
Este exemplo de código também pode ser implementado usando a API de busca WHATWG :
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)
})
Essas abordagens:
Suporte do navegador:
Carregue a imagem em um objeto de imagem, pinte-a em uma tela não contaminada e converta a tela novamente em um 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)
}
)
Formatos de entrada suportados:
image/png
, image/jpeg
, image/jpg
, image/gif
, image/bmp
, image/tiff
, image/x-icon
, image/svg+xml
, image/webp
,image/xxx
Formatos de saída suportados:
image/png
, image/jpeg
, image/webp
(Cromado)
Suporte do navegador:
Internet Explorer 10 (Internet Explorer 10 funciona apenas com as mesmas imagens de origem)
Se você deseja converter imagens do sistema de arquivos dos usuários, precisa adotar uma abordagem diferente. Use a 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)" />
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.
Esse snippet pode converter sua string, imagem e arquivo de vídeo em dados de 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>
Basicamente, se sua imagem é
<img id='Img1' src='someurl'>
então você pode convertê-lo como
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();
<img id='Img1' src='someurl' crossorigin='anonymous'>
Aqui está o que eu fiz:
// 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);
}
E aqui está como você o usa
base64( $('input[type="file"]'), function(data){
console.log(data.base64)
})
Eu descobri que a maneira mais segura e confiável de fazer isso é usar FileReader()
.
Demonstração: Image to 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>
Se você tiver um objeto de arquivo, esta função simples funcionará:
function getBase64 (file, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(file);
}
Exemplo de uso:
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
});
Você pode usar o FileAPI , mas praticamente não é suportado.
Tanto quanto eu sei, uma imagem pode ser convertida em uma string Base64 por FileReader () ou armazenada no elemento canvas e, em seguida, use toDataURL () para obter a imagem. Eu tive o tipo semelhante de problema, você pode consultar isso.
Tente este código:
Para um evento de alteração de upload de arquivo, chame esta função:
$("#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();
}
Armazene os dados Base64 em arquivos ocultos para uso.
uploadProfile(e) {
let file = e.target.files[0];
let reader = new FileReader();
reader.onloadend = function() {
console.log('RESULT', reader.result)
}
reader.readAsDataURL(file);
}
Bem, se você estiver usando o Dojo Toolkit , ele nos fornece uma maneira direta de codificar ou decodificar no Base64.
Tente o seguinte:
Para codificar uma matriz de bytes usando dojox.encoding.base64:
var str = dojox.encoding.base64.encode(myByteArray);
Para decodificar uma sequência codificada em Base64:
var bytes = dojox.encoding.base64.decode(str);