web-dev-qa-db-fra.com

Charger l'image locale dans le navigateur à l'aide de JavaScript?

Je développe actuellement une solution pour une application d'impression d'affiche sur le Web.

L'une des fonctionnalités que j'aimerais inclure est la possibilité de "modifier" (rogner/redimensionner/faire pivoter) une image donnée, avant de passer à la commande d'un poster de cette image.

Pour éviter que l'utilisateur télécharge l'image sur un serveur distant avant de le modifier, j'aimerais connaître les informations suivantes:

Est-il possible (à l'aide de JavaScript) de charger une image stockée sur l'ordinateur client dans la mémoire du navigateur/du navigateur pour la modifier, sans télécharger l'image sur un serveur distant? Et si oui, comment cela se fait-il?

Merci,

BK

javascriptimage-processinguploading
20
kaese

En utilisant HTML/Javascript, vous pouvez uniquement sélectionner des fichiers en utilisant le composant HTML de téléchargement de fichier (je pense que Flash/Silverlight encapsule cela pour rendre les choses plus faciles, mais cela reste en sandbox)

Vous pouvez cependant utiliser des applets Java (ou peu importe comment on les appelle aujourd'hui), des contrôles ActiveX natifs ou des contrôles .Net pour fournir des fonctionnalités supplémentaires (ce qui a des conséquences sur la sécurité et nécessite des cadres VM/Runtimes, etc.).

Adobe Air ou une autre technologie côté client peut fonctionner, mais semble vouloir le faire en JavaScript. Dans ce cas, le meilleur moyen est de télécharger le fichier sur le serveur et d’y manipuler.

* [MODIFIER] Depuis 2010, depuis que la question a été résolue, la technologie a évolué, le langage HTML a maintenant la capacité de créer et de manipuler dans le navigateur. voir les réponses plus récentes ou ces exemples: http://davidwalsh.name/resize-image-canvashttp://deepliquid.com/content/Jcrop.html *

0
Mark Redman

L'image peut être modifiée sans que l'utilisateur ait besoin de télécharger l'image sur le serveur. 

Regardez le lien ci-dessous. Cela peut être fait assez facilement.

Lecture de fichiers locaux en Javascript

11
santhgates

Oui, vous pouvez! Mais pour ce faire, le navigateur doit prendre en charge le stockage local! C'est une api HTML5 donc la plupart des navigateurs modernes pourront le faire! N'oubliez pas que localstorage ne peut enregistrer que les données de chaîne. Vous devez donc transformer les images en chaîne de type blob. Votre source d'image ressemblera à quelque chose comme ça

Ceci est un court extrait qui vous aidera!

                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 }

J'espère que vous trouverez ce court extrait utile. N'oubliez pas que Localstorage enregistre uniquement les données de chaîne 

Au fait, si vous utilisez un jcrop pour rogner les images, vous devez enregistrer le code blob d’image en formulaire et l’envoyer manuellement au serveur, car jcrop traite uniquement les images en tant que fichier, mais pas en chaîne base64.

Bonne chance! :RÉ

2
twboc