Discussion :

[Daruzon]

Bonjour à tous,

Je suis actuellement confronté à un problème de gestion d'uploads d'images et je souhaite pouvoir, sans l'aide de PHP -pour épargner autant que possible les ressources serveur-, prendre en charge le redimensionnement et le rognage automatiques d'une image avant upload, en JavaScript.

Quelqu'un saurait comment faire cela, si c'est possible ?

Merci d'avance

[Bovino]

Même s'il existe déjà quelques pistes, ce n'est actuellement pas possible : JavaScript ne gère pas les images, en tout cas de façon cross-browser.

[Daruzon]

Cross-browser ou pas ca me gene pas d'implémenter différentes facons de faire, mon site gère deja la generation de CSS et JavaScript à la volée, et je ne cherche pas à l'adapter à IE; s'agit surtout qu'il fonctionne avec les navigateurs aux moteurs Webkit et Gecko

[thelvin]

En fait, je vois comment charger l'image avec Mozilla, ceci aide : https://developer.mozilla.org/en/usi...b_applications
Il doit sûrement y avoir des choses côté webkit.

Je saurais manipuler l'image avec <canvas>.
Je saurais obtenir les dimensions de l'image obtenue et la valeur argb de ses pixels ; ou bien une data-URL du résultat en JPEG ou en PNG.

Mais je vois vraiment pas comment transmettre ça au serveur directement comme si c'était un fichier. Passer un data-URL ou encoder les pixels, c'est assez lourd.

[Daruzon]

Avec quelles fonctions tu ferais ca (<canvas> / dimensions / encodage DataURL) ? Et surtout, ce serait quel encodage ? Du base64 ?

Pour ce qui est d'uploader l'image une fois encodée en dataURL, j'en fais mon affaire, faire un upload AJAX ou envoyer une string en AJAX, aucun des deux ne me gêne... Le tout c'est que sous quelque forme que ce soit j'aie une image jpg en sortie, dont je puisse définir une hauteur maxi et une largeur maxi...
Quant à canvas je vais me renseigner un peu :-)

[dukej]

Je vais te donner une réponse à ta question qui ne va pas du tout te plaire :
A partir du moment où ta page se trouve sur un serveur (http), tu ne pourras JAMAIS lire/accéder au contenu stocké sur le disque d'un utilisateur, même si l'utilisateur a sélectionné ce fichier/image par un input type="file", il y a pleins de sécurités selon les navigateurs qui t'empêcheront de faire ce que tu souhaite faire.

Le seul moyen, c'est d'utiliser une applet Java.

Regarde facebook par exemple.

[Daruzon]

Il semblerait que thelvin et toi n'êtes pas du même avis.

Je suis actuellement loin d'etre brillant en JavaScript, mais je constate quand meme un certain nombre de frontieres dans cette question de gestion d'images, frontieres qui sont tout sauf nettes.

A en croire les tutos sur l'upload en AJAX, il est manifestement possible de gérer le transfert d'un fichier en JavaScript; et donc de gérer le contenu binaire d'un fichier en JavaScript. À partir de là, il suffirait de pouvoir transcrire le binaire en data-URL pour le manipuler dans un canevas, et de là, générer et uploader le canevas...

J'ai trouvé http://blog.footle.org/2007/07/31/bi...in-javascript/ , j'y ai pas encore tout compris mais je crois que ca m'apporte des éléments de réponse pour ce qui est de la création de data-URLs... Reste à charger le fichier image dans une variable JavaScript manipulable sur la même lancée que via un upload mais en m'interrompant avant Oo