javascript - decodificar - imagen en base64
convertir base64 en imagen en javascript/jquery (5)
Este no es exactamente el escenario del OP, sino una respuesta a las de algunos de los comentaristas. Es una solución basada en Cordova y Angular 1, que debería ser adaptable a otros frameworks como jQuery. Le da una gota de datos de Base64 que puede almacenar en algún lugar y hacer referencia a ella desde el lado del cliente javascript / html.
También responde la pregunta original sobre cómo obtener una imagen (archivo) a partir de los datos de Base 64:
La parte importante es la Base 64 - Conversión binaria:
function base64toBlob(base64Data, contentType) {
contentType = contentType || '''';
var sliceSize = 1024;
var byteCharacters = atob(base64Data);
var bytesLength = byteCharacters.length;
var slicesCount = Math.ceil(bytesLength / sliceSize);
var byteArrays = new Array(slicesCount);
for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
var begin = sliceIndex * sliceSize;
var end = Math.min(begin + sliceSize, bytesLength);
var bytes = new Array(end - begin);
for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
bytes[i] = byteCharacters[offset].charCodeAt(0);
}
byteArrays[sliceIndex] = new Uint8Array(bytes);
}
return new Blob(byteArrays, { type: contentType });
}
Se requiere cortar para evitar errores de falta de memoria.
Funciona con archivos jpg y pdf (al menos eso es lo que probé). Debería funcionar también con otros tipos de miméticos / tipos de contenido. Comprueba los navegadores y sus versiones para las que apuntas, deben ser compatibles con Uint8Array, Blob y atob.
Aquí está el código para escribir el archivo en el almacenamiento local del dispositivo con Cordova / Android:
...
window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function(dirEntry) {
// Setup filename and assume a jpg file
var filename = attachment.id + "-" + (attachment.fileName ? attachment.fileName : ''image'') + "." + (attachment.fileType ? attachment.fileType : "jpg");
dirEntry.getFile(filename, { create: true, exclusive: false }, function(fileEntry) {
// attachment.document holds the base 64 data at this moment
var binary = base64toBlob(attachment.document, attachment.mimetype);
writeFile(fileEntry, binary).then(function() {
// Store file url for later reference, base 64 data is no longer required
attachment.document = fileEntry.nativeURL;
}, function(error) {
WL.Logger.error("Error writing local file: " + error);
reject(error.code);
});
}, function(errorCreateFile) {
WL.Logger.error("Error creating local file: " + JSON.stringify(errorCreateFile));
reject(errorCreateFile.code);
});
}, function(errorCreateFS) {
WL.Logger.error("Error getting filesystem: " + errorCreateFS);
reject(errorCreateFS.code);
});
...
Escribir el archivo en sí:
function writeFile(fileEntry, dataObj) {
return $q(function(resolve, reject) {
// Create a FileWriter object for our FileEntry (log.txt).
fileEntry.createWriter(function(fileWriter) {
fileWriter.onwriteend = function() {
WL.Logger.debug(LOG_PREFIX + "Successful file write...");
resolve();
};
fileWriter.onerror = function(e) {
WL.Logger.error(LOG_PREFIX + "Failed file write: " + e.toString());
reject(e);
};
// If data object is not passed in,
// create a new Blob instead.
if (!dataObj) {
dataObj = new Blob([''missing data''], { type: ''text/plain'' });
}
fileWriter.write(dataObj);
});
})
}
Estoy usando las últimas versiones de Cordova (6.5.0) y complementos:
Espero que esto ponga a todos aquí en la dirección correcta.
He escrito un código para capturar imágenes usando javascript / jquery A continuación se muestra el código:
function capture_image(){
alert("capture_image");
var p = webcam.capture();
webcam.save();
alert("capture complete "+p); //getting true here
var img = canvas.toDataURL("image");
var item_image = img.replace(/^data:image//(png|jpg);base64,/, "") ;
alert("item_image"+item_image);
}
El item_image imprime el formato base64, cómo convertir ese base64 a la imagen y cómo usar esa ruta en el lado del cliente de javascript.
Estoy buscando en Google tantos sitios web pero no funciona y ese código no es adecuado para mis requerimientos.
Html
<img id="imgElem"></img>
Js
string baseStr64="/9j/4AAQSkZJRgABAQE...";
imgElem.setAttribute(''src'', "data:image/jpg;base64," + baseStr64);
Simplemente puede crear un objeto Image y poner el base64 como su src , incluyendo los data:image... parte como esta :
var image = new Image();
image.src = ''data:image/png;base64,iVBORw0K...'';
document.body.appendChild(image);
Es lo que ellos llaman "URI de datos" y aquí está la tabla de compatibilidad para la paz interior.
Una manera rápida y fácil:
function paintSvgToCanvas(uSvg, uCanvas) {
var pbx = document.createElement(''img'');
pbx.style.width = uSvg.style.width;
pbx.style.height = uSvg.style.height;
pbx.src = ''data:image/svg+xml;base64,'' + window.btoa(uSvg.outerHTML);
uCanvas.getContext(''2d'').drawImage(pbx, 0, 0);
}
var src = "data:image/jpeg;base64,";
src += item_image;
var newImage = document.createElement(''img'');
newImage.src = src;
newImage.width = newImage.height = "80";
document.querySelector(''#imageContainer'').innerHTML = newImage.outerHTML;//where to insert your image