La carga de la imagen local en el navegador con JavaScript?

Actualmente estoy desarrollando una solución para una web-to-print, impresión de póster de la aplicación.

Una de las características que me gustaría incluir es la capacidad de ‘editar’ (cultivo/escalar/rotar) una imagen determinada, antes de proceder a pedido de un cartel de dicha imagen.

Para evitar el requisito de que el usuario subir la imagen a un servidor remoto antes de la edición, me gustaría saber lo siguiente:

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

Gracias,

BK

InformationsquelleAutor kaese | 2010-10-22

4 Kommentare

  1. 0

    El uso de Html/Javascript sólo puede seleccionar los archivos mediante la carga de archivos html componente (creo que Flash /Silverlight terminar con esto para facilitar las cosas, pero su todavía sandbox)

    Sin embargo, puede utilizar los Applets de Java (orwhatever se llaman estos días), Nativo o los controles ActiveX .Net Controles para proporcionar funcionalidad adicional (esto hase implicaciones de seguridad y requiere VM/tiempos de ejecución de los Marcos etc)

    Adobe Air o el otro lado del cliente la tecnología podría funcionar, pero parece que usted quiere hacer esto en JavaScript. En este caso, subir el archivo al servidor y la manipulación de allí es la mejor apuesta.

    *[EDITAR]
    Desde 2010, ya que esta pregunta fue respondida, la tecnología ha avanzado, html ahora tiene la capacidad de crear y manipular en el navegador. ver más reciente respuestas o estos ejemplos:
    http://davidwalsh.name/resize-image-canvas
    http://deepliquid.com/content/Jcrop.html
    *

    • Gracias Marcos. No negativas para el uso de otra tecnología de lado del cliente, proporcionando proporciona la funcionalidad requerida, a pesar de que JavaScript es preferencial.
    • Marque esta blueimp.github.com/JavaScript-Load-Image, se utiliza la URL, FileReader API
  2. 12

    La imagen se puede editar sin que el usuario necesita para subir la imagen al servidor.

    Echar un vistazo en el enlace de más abajo. Se puede hacer con bastante facilidad.

    La lectura de archivos locales mediante Javascript

    • Este es un enlace única respuesta. Las respuestas deben ser explicado aquí, y no en un enlace externo. Los enlaces deben ser sólo para apoyar una explicación, no es la única cosa proporcionada en la respuesta, ya que se puede ir fuera de línea en cualquier momento.
  3. 2

    Sí se puede! Pero para hacer que el navegador debe soportar el almacenamiento Local! Es de la api de HTML5 por lo que la mayoría de los navegadores modernos será capaz de hacerlo! Recuerde que localstorage sólo puede guardar los datos de cadena por lo que debe cambiar las imágenes en una nota de la cadena. Su fuente de la imagen se verá algo como esto

    Este es un pequeño fragmento 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 }

    Esperamos que esta breve fragmento de código útil. Recuerde Localstorage sólo guarda datos de cadena, de modo que usted no

    Ah, y por cierto, si usted está usando un jcrop para recortar las imágenes para guardar la nota, el código de la imagen para el formulario y enviarlo al servidor de forma manual debido a jcrop sólo se encarga de las imágenes como un archivo no como una cadena base64.

    ¡Buena suerte! 😀

  4. -2

    Sólo estoy tratando de hacerlo, pero con chrome me aparece 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');
    }
    • file:// Url tener diferentes configuraciones de seguridad de todo lo demás. Trate de hosting en un servidor web local (o JSFiddle) y ver cómo se comporta.
    • Esta no es una respuesta real

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea