viernes, 10 de octubre de 2014

Generador de Imagen thumbnail en base 64 (readAsDataURL) con JavaScript

Una manera facil y sencilla de cargar una imagen y generar un thumbnail con el objeto FileReader de JavaScript, usando usar readAsDataURL () para obtener imágenes que un usuario ha seleccionado y una vista previa en la pantalla. 

Code

<!DOCTYPE html>
<input type="File" id="image_file" accept="image/*">
<input type="button" value="import" onclick="importImageToData()"><br><br>
<script>
function importImageToData(){
var imageFile = document.getElementById("image_file").files[0];
var formatreader = new FileReader();
formatreader.onloadend = function(e){
console.log("file Loaded");
var imageData = e.target.result;
var viewdata = document.createElement("textarea");
var img = document.createElement("img");
img.src = viewdata.value = imageData;
document.body.appendChild(img);
document.body.appendChild(document.createElement("br"));
document.body.appendChild(viewdata);
viewdata.select();
}
formatreader.readAsDataURL(imageFile);
};
</script>