Javascript Girl
  1. Javascript Girl
  3. Création / modification d'images en JavaScript
Intereting Posts
Comment puis-je définir la barre de défilement de la barre de texte vers le bas en tant que valeur par défaut? Téléchargement de fichier AJAX avec XMLHttpRequest Angularjs ng-repeat item pour les attributs de l'étiquette Obtenez la hauteur d'un élément moins le rembourrage, la marge, les largeurs de bordure Obtenir l'URL actuelle de la fenêtre contextuelle avec javascript Toute différence entre f () et (f ())? Faites défiler jusqu'au bas dans la zone de chat dans angularjs Système efficace de particules en javascript? (WebGL) Comment promettre les fonctions child_process.exec et child_process.execFile de Node avec Bluebird? JavaScript: pour la boucle avec timeout Analyser XML vers JSON dans Amazon Lambda en utilisant des bibliothèques externes js Les caractères spéciaux ne sont pas lus à partir d'un fichier JSONP correctement Pourquoi le script ajax et php n'est-il pas posté dans la forme originale Sélection de table Javascript Comment commander des divs avec JQUERY

Création / modification d'images en JavaScript

Est-il possible de créer et de modifier dynamiquement des images sur un niveau par pixel en JavaScript (côté client)? Ou cela a-t-il lieu avec un langage basé sur le serveur, tel que PHP?

Mon cas d'utilisation est le suivant:

  • L'utilisateur ouvre la page Web et charge l'image mémorisée localement
  • Un aperçu de l'image s'affiche
  • L'utilisateur peut modifier l'image avec un ensemble de curseurs (opérations au niveau des pixels)
  • En fin de compte, il peut télécharger l'image dans son HDD local

Lors de la recherche sur le Web, je viens de trouver des publications sur l'utilisation de la méthode de filtrage d'IE, mais je n'ai rien trouvé sur les fonctions d'édition d'image en JavaScript.

Cela doit se faire du côté du serveur. Une chose que vous pourriez envisager de faire est de permettre à tout l'édition d'aller sur le côté client, puis à la fin POST l'image finale (via AJAX) sur le serveur pour lui permettre de le retourner comme le type MIME correct et correctement emballé.

Certains navigateurs supportent le canevas: http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas

Vous pouvez consulter Processing.js . John Resig de jQuery a fait la même chose. Il prend en charge le traitement des pixels, malheureusement, seul Firefox 3 peut le gérer suffisamment.

Regardez également les URI de données (bien que les versions IE inférieures à 8 ne les soutiennent pas, malheureusement!)

Vous pouvez imaginer un ensemble d'outils JS qui permettront à l'utilisateur de définir le type de transformation qu'il veut faire, mais le travail final de transformation DOIT être effectué sur le côté du serveur. JS du côté client est incapable de créer un fichier, pour des raisons de sécurité.

Essayez Allicorn's Image Retargetter – ça me semble être ce que vous recherchez.

La manipulation d'image locale en JavaScript devrait être possible – regardez Defender of the Favicon . 😉 La question est de savoir comment obtenir l'image originale du système de fichiers dans votre page (je ne connais rien d'autre que de faire un téléchargement HTTP au serveur en premier).