cultures de fichier image locale

Question

je me suis un formulaire qui permet à l'utilisateur de télécharger l'image et la recadrer je l'ai déjà compris le débit de celui-ci

1.User télécharger l'image
processus 2.Server et renvoyer le navigateur
culture 3.User et envoyer au serveur
processus 4.Server et enregistrez-

est-il un autre moyen d'y parvenir?
Peut-être en utilisant javascript pour charger l'image, puis recadrer puis envoyer au serveur pour le traiter.
Y a-t-il un moyen?

Édité Je cherche à éviter d'envoyer ces images au serveur pour les traiter.
charger le fichier en utilisant probablement FileReader ..
Je n'ai pas de chance sur googler

Answer 1

Vous pouvez utiliser FileReader + Canvas pour lire le fichier local, puis le recadrer sans l'envoyer au serveur.

Voici une démo montrant comment faire cela.

<form><input type="file" id=f></form> 
<canvas id=c width="600" height="600"></canvas> 
<script> 
var f = document.getElementById('f'); 
var canvas = document.getElementById('c'); 
var context = canvas.getContext('2d'); 
f.onchange = function() { 
    var file = this.files[0]; 
    var reader = new FileReader(); 
    reader.onload = function(evt) { 
     var img = new Image(); 
     img.onload = function() { 
      context.drawImage(this, 0, 0, 100, 100, 0, 0, 100, 100); 
      var pngUrl = canvas.toDataURL(); 
      //alert(pngUrl); // send this url to server to save the image 
     } 
     img.src = evt.target.result; 
    } 
    reader.readAsDataURL(file); 
} 
</script> 

Ce que vous devez toujours faire est d'utiliser le plug-in du jquery afin de permettre à l'utilisateur de sélectionner la zone de recadrage parce que dans cette démo que je viens dur une récolte de codé en haut à gauche 100x100 pixels.

Il semble que vous aurez envie d'utiliser l'événement jcrops onSelect pour obtenir l'origine + largeur + hauteur de la zone de culture, et nourrir ces valeurs dans context.drawImage

espérons que vous pouvez gérer le reste, bonne chance

Answer 2

Pour cela, I'd use jCrop. Assurez-vous que vous avez accès à ImageMagick et/ou GD sur votre système - vous en aurez probablement besoin pour le traitement.