web-dev-qa-db-fra.com

Télécharger et agrandir l'image avant de l'envoyer au serveur

Y a-t-il des composants du client (JQuery/SWF) qui donnera la possibilité de pload and Crop (l'utilisateur doit pouvoir sélectionner la zone à recadrer) une image dans le navigateur, puis envoyer l'image recadrée à le serveur?

Je suis sur ASP.NET-MVC (pas sûr si cela importe)

17
Omu

jcrop

JCROP est le moyen rapide et facile d'ajouter une fonctionnalité de culture d'image à votre application Web. Il combine la facilité d'utilisation d'un plugin de jQuery typique avec un puissant moteur de recadrage DHTML multi-plate-forme qui est fidèle à des applications graphiques de bureau familières.

20
CD..

Le plug-in Jcrop Image pourrait être bon à l'affichage de l'interface utilisateur de culture et à obtenir les coordonnées recadrées dans le navigateur. Cependant, ce n'est pas récolter l'image. Par conséquent, le processus de recadrage est effectué sur le serveur, qui est plutôt mauvais pour votre performance de serveur.

La réponse - ( ici Introduit une extension JCROP qui cultive l'image dans le navigateur et télécharge le CROCHED Image sur le serveur. "Il utilise le plugin JCROP sur les images de culture, dessine la zone recadrée de l'élément HTML 5 Canvas, convertit la toile en une blob et télécharge le fichier image sur le serveur par Ajax".

La partie la plus importante est la fonction CanvastoBlob qui convertit l'élément de toile HTML 5 sur un type de blob pouvant être téléchargé sur le serveur comme images. Malheureusement, cette méthode fonctionne uniquement dans AJAX et ne peut pas soumettre de formulaire directement, car le blob ne peut pas être placé dans l'élément de formulaire HTML standard en tant que fichier d'entrée. En réalité, nous rarement Utilisez le formulaire pour soumettre des images directement lorsque vous les cultivez.

9
user4139457

Vous devez combiner un UI de culture avec un téléchargeur pour compléter cette tâche complexe. L'interface utilisateur de la culture est responsable de l'affichage de l'interface utilisateur de la culture et de donner les coordonnées de culture, ainsi que des cultures de téléchargeur et redimensionne l'image, la convertissent en une blob et de la télécharger sur un serveur.

L'interface utilisateur de culture est courante, mais le téléchargeur est difficile à trouver. Je recommande le culture UI imgareaselect qui est facile à utiliser et ce ploader qui est simple et extensible, mais ce n'est pas gratuit.

4
user4199643