node - javascript convertir base64
Convierta un base64 a un archivo en Javascript (1)
El objetivo es transformar una cadena base64 en un archivo jpg que se pueda enviar, no puedo usar el archivo tipo de entrada html, pero tengo que publicarlo en el mismo formato. Estoy un poco perdido con la generación de archivos. (Estoy en una aplicación móvil del lado del cliente).
Esto es lo que tengo:
file = "data:image/jpg;base64,#{imageData}"
imageData es la cadena base64
Hay una forma de transformar esto en un archivo válido?
Descargo de responsabilidad : Produce un resultado no válido (cercano, pero no válido)
He hecho lo contrario la semana pasada, es decir, cargar una imagen como datos binarios (para evitar el requisito de ejecutar un archivo desde el host local).
En él, yo:
- cargado el archivo
- base64 lo convirtió
- se agregó un preámbulo a la cadena base64
- establecer la cadena construida para ser el src de un elemento img
Esto funcionó bien. Al leer su pregunta, traté de simplemente invertir el proceso. Sin embargo, no tuve éxito en algún lado. Los datos se extraen de la imagen correctamente, y luego en algún lugar (creo que en la llamada a atob que los descodifica) los datos están desordenados.
Los archivos guardados tienen un tamaño inesperado, tienen un carácter adicional antes de "% PNG" y algunos datos faltantes en el medio del archivo. Estoy bastante perplejo en este punto, para ser honesto.
De todos modos, aquí está el código que he intentado:
1. Código para leer un archivo y rellenar los datos en un elemento
// fileVar is an object as returned by <input type=''file''>
// imgElem is an <img> element - (doesn''t need to be added to the DOM)
function loadImgFromFile(fileVar, imgElem)
{
var fileReader = new FileReader();
fileReader.onload = onFileLoaded;
fileReader.readAsBinaryString(fileVar);
function onFileLoaded(fileLoadedEvent)
{
var result,data;
data = fileLoadedEvent.target.result;
result = "data:";
result += fileVar.type;
result += ";base64,";
result += btoa(data);
imgElem.src = result;
}
}
2. Intente obtener datos de una imagen / lienzo y fuerce la descarga de este utilizando un nombre de archivo proporcionado por el programador.
<!doctype html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e)}
function newEl(tag){return document.createElement(tag)}
window.addEventListener(''load'', onPageLoaded, false);
function onPageLoaded(evt)
{
var imgElem = byId(''srcImg'');
imgElem.onload = function(){saveImgAsFile( byId(''srcImg''), "myImage.png" );};
// simple result of canvas.toDataURL() called on a 5x5 pixel image of a ''+''
imgElem.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHklEQVQIW2NkQID/QCYjiAsmoABFEMRBAThVYmgHAAhoBQWHhfyYAAAAAElFTkSuQmCC";
// use the below line instead of the one above, if you wish to assign an actual image file, rather than the result of call to canvas.toDataURL()
// the base64 string allows me to keep it all in the one file, also, to run if opened via a double-click, rather than having to run from localhost
// imgElem.src = "img/1x1.png";
}
function saveImgAsFile(imgElem, fileName)
{
// get a base64 encoded string from an image element
var srcElem = imgElem;
var dstCanvas = newEl(''canvas'');
dstCanvas.width = srcElem.naturalWidth;
dstCanvas.height = srcElem.naturalHeight;
var ctx = dstCanvas.getContext(''2d'');
ctx.drawImage(srcElem,0,0);
var imgSrcStr = dstCanvas.toDataURL();
// extract the image type
var colonPos = imgSrcStr.indexOf(":");
var semiColonPos = imgSrcStr.indexOf(";");
var imgType = imgSrcStr.slice(colonPos+1, semiColonPos);
console.log("image type: " + imgType);
// extract the image data
var commaPos = imgSrcStr.indexOf('','');
var base64ImgString = imgSrcStr.slice(commaPos + 1);
console.log("Data: " + base64ImgString);
// holds the data that is actually written to disk for this image
//** I think the error occurs during this step **//
var unencodedImage = atob(base64ImgString);
var imgFileAsBlob = new Blob( [unencodedImage], {type: imgType} );
var fileNameToUse = fileName;
var downloadLink = newEl(''a'');
downloadLink.download = fileNameToUse;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(imgFileAsBlob);
}
else
{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(imgFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
}
/*
function saveTextAsFile()
{
var textToWrite = "This is just some random content";
var textFileAsBlob = new Blob([textToWrite], {type:''text/plain''})
var fileNameToSaveAs = "myFile.txt";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else
{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
}
*/
function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}
</script>
</head>
<body>
<img id=''srcImg''/>
</body>
</html>