Manipulation d'un fichier image sans AJAX

**Daruzon** · 16/11/2010, 19h37

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** · 16/11/2010, 20h38

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** · 16/11/2010, 21h40

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** · 17/11/2010, 00h03

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** · 17/11/2010, 01h39

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** · 17/11/2010, 01h52

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** · 17/11/2010, 23h55

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

**franculo_caoulene** · 18/11/2010, 01h29

Salut,

Je suis thelvin, il y a l'API file de HTML5 fonctionnant sur les moteurs gecko et webkit. Puis l'utilisation de canvas permettrait de sauvegarder l'image sous forme de data URL.
Un exemple simple,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Sauvegarder un canvas</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  * {margin:0;padding:0;}
  body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
  h1 {font-size:1.5em;}
  P {margin:20px 0 5px 0;}
  </style>
</head>
<body>
  <h1>Sauvegarder un canvas</h1>
  <p>canvas</p><canvas></canvas>
  <p>image tirée du data URL</p><img title="surprise" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAC9klEQVR4nO3QsYlEQRBDwZ9/0nspPMYR1xSiPBlC3/f9fgD/w3wAQDUfAFDNBwBU8wEA1XwAQDUfAFDNBwBU8wEA1XwAQDUfAFDNBwBU8wEA1XwAQDUfAFDNBwBU8wEA1XwAQDUfAFDNBwBUtXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXfzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HADR/jHJE84A88/cAAAAASUVORK5CYII=" />
  <p>décommenter la dernière ligne du code javascript pour obteir le data URL.</p>
  <script type="text/javascript">
  var ctx = document.querySelector('canvas').getContext('2d');
  ctx.fillStyle = 'rgb(0, 0, 255)';
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.fillStyle = 'rgb(0, 255, 0)';
  ctx.fillRect(10, 20, 50, 50);
  //window.location = ctx.canvas.toDataURL('image/png');
  </script>
</body>
</html>

**Daruzon** · 18/11/2010, 01h59

C'est genial

Ca eviterait de se cantonner aux blobURL de Gecko, et ca couvrirait presque tous mes besoins (me reste encore Opera mais ca reste marginal...)
J'essaie de rendre tout ca élagué et viable d'ici ce week-end et je vous fais un retour =D

merci !

**marcha** · 18/11/2010, 12h01

Salut,

On a expérimenté 2 ou 3 choses sur ce post

Manipulation d'un fichier image sans AJAX

JavaScript

Discussions similaires

Partager

Partager