img imagen funciona files decodificar data convertir convert como codificacion javascript base64

funciona - Cómo convertir una imagen en una cadena base64 usando javascript



decodificar imagen base64 javascript (9)

Aquí esta lo que hice

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

Y aquí es cómo lo usas.

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

Necesito convertir mi imagen en una cadena base64 para poder enviar mi imagen a un servidor. ¿Hay algún archivo js para esto ...? De lo contrario como convertirlo


Básicamente, si tu imagen es

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

entonces puedes convertirlo 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, 0, 0, c.width, c.height); var base64String = c.toDataURL();


Bueno, si está utilizando dojo, nos da una forma directa de codificar o decodificar en base64.

Prueba esto:

Para codificar una matriz de bytes utilizando dojox.encoding.base64:

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

Para decodificar una cadena codificada en base64:

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


Este fragmento podría convertir su cadena, imagen e incluso archivo de video a datos de cadena base64. Inténtalo una vez ...

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


Hay varios enfoques que puede elegir:

1. Enfoque: FileReader

Cargue la imagen como blob a través de XMLHttpRequest y use la API FileReader para convertirla en un 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 ejemplo de código también podría implementarse utilizando la API de captura 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) })

Estos enfoques:

  • falta en el soporte del navegador
  • tener mejor compresión
  • trabajar para otros tipos de archivos también

Soporte del navegador:

2. Enfoque: Lona

Cargue la imagen en un objeto de imagen, píntela en un lienzo no contaminado y vuelva a convertir el lienzo en un 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) } )

en detalle

Formatos de entrada soportados:

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

Formatos de salida soportados:

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

Soporte del navegador:

3. Enfoque: Imágenes del sistema de archivos local.

Si desea convertir imágenes del sistema de archivos de los usuarios, debe adoptar un enfoque diferente. Utilice la 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)" />


Por lo que sé, la imagen se puede convertir en una cadena base64 mediante FileReader () o almacenándola en un elemento de lienzo y luego usa toDataURL () para obtener una imagen. Tuve el tipo de problema similar al que puedes referirte.

Convertir una imagen a lienzo que ya está cargado


Prueba este código

Cargar archivo evento Chnage ccall esta función

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

Almacenar base64data en archivos ocultos para usar.


Puedes usar FileAPI , pero no está soportado.


Puedes usar HTML5 <canvas> para ello:

Cree un lienzo, cargue su imagen en él y luego use toDataURL() para obtener la representación de base64 (en realidad, es un data: URL pero contiene la imagen codificada en base64).