subir - mostrar imagen base64 javascript

¿Cargar imagen local en el navegador usando JavaScript?

Question

Actualmente estoy desarrollando una solución para una aplicación de impresión de pósteres de impresión en línea.

Una de las características que me gustaría incluir es la capacidad de ''editar'' (recortar / escalar / rotar) una imagen dada, antes de proceder a ordenar un póster de dicha imagen.

Para evitar el requisito de que el usuario cargue la imagen en un servidor remoto antes de editarla, me gustaría saber lo siguiente:

¿Es posible (usando JavaScript) cargar una imagen almacenada en la máquina cliente en la memoria del navegador / navegador para editarla, sin cargar la imagen a un servidor remoto? Y si es así, ¿cómo se hace esto?

Gracias,

BK

Answer 1

¡Sí tu puedes! ¡Pero para hacerlo el navegador debe soportar almacenamiento local! Es HTML5 api por lo que la mayoría de los navegadores modernos podrán hacerlo! Recuerde que localstorage solo puede guardar datos de cadena, por lo que debe cambiar las imágenes en una cadena de blob. Tu fuente de imagen se verá así

Este es un fragmento corto que te ayudará!

                if(typeof(Storage)!=="undefined"){

                // here you can use the localstorage
                // is statement checks if the image is in localstorage as a blob string
                if(localStorage.getItem("wall_blue") !== null){

                var globalHolder = document.getElementById(''globalHolder'');
                var wall = localStorage.getItem(''wall_blue'');
                globalHolder.style.backgroundImage= "url("+wall+")";


                 }else{

                // if the image is not saved as blob in local storage
                // save it for the future by the use of canvas api and toDataUrl method
                var img = new Image();
                img.src = ''images/walls/wall_blue.png'';
                img.onload = function () {

                var canvas = document.createElement("canvas");
                canvas.width =this.width;
                canvas.height =this.height;

                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, 0, 0);
                var dataURL = canvas.toDataURL();
                localStorage.setItem(''wall_blue'', dataURL);

                };

            }}else{//here  you upload the image without local storage }

Espero que este breve fragmento sea de utilidad. Recuerde que Localstorage solo guarda datos de cadena para que no pueda

Por cierto, si está utilizando un jcrop para recortar las imágenes, debe guardar el código de la imagen en el formulario y enviarlo al servidor manualmente porque jcrop solo maneja las imágenes como un archivo, no como una cadena base64.

¡Buena suerte! :RE

Answer 2

La imagen se puede editar sin que el usuario necesite cargar la imagen al servidor.

Echar un vistazo a el siguiente enlace. Se puede hacer con bastante facilidad.

Leyendo archivos locales usando Javascript

Answer 3

Solo trato de hacerlo, pero con Chrome recibo este mensaje:

Not allowed to load local resource: file:///C:/fakepath/1.jpg

cuando hago esto

$img = new Image();
$img.src = $(''#f'').val();
$img.onLoad = function (){
    alert(''ok'');
}

Answer 4

Usando Html / Javascript, solo puede seleccionar archivos usando el componente html de carga de archivos (creo que Flash / Silverlight envuelve esto para hacer las cosas más fáciles pero aún está en un espacio aislado)

Sin embargo, puede usar applets de Java (o como se llamen estos días), controles ActiveX nativos o controles .Net para proporcionar funcionalidad adicional (esto tiene implicaciones de seguridad y VM / Runtimes Frameworks requeridos, etc.)

Adobe Air u otra tecnología del lado del cliente pueden funcionar, pero parece que desea hacerlo en JavaScript. En este caso, subir el archivo al servidor y manipularlo es la mejor opción.

* [EDITAR] Desde 2010, desde que se respondió a esta pregunta, la tecnología ha avanzado, html ahora tiene la capacidad de crear y manipular dentro del navegador. vea las respuestas más recientes o estos ejemplos: http://davidwalsh.name/resize-image-canvas http://deepliquid.com/content/Jcrop.html *