Image de récolte Javascript côté client

EDIT (2014): Cette réponse est maintenant obsolète! JavaScript est un langage de programmation avec des implémentations fortement influencées par les ressources du navigateur mises à leur disposition. Il y a trois ans, lorsque cette publication a été publiée (juillet 2011), les navigateurs n'avaient aucune fonctionnalité fiable qui permette à OP de faire ce qu'il a demandé, d'où ma réponse.
Si vous êtes toujours intéressé par la façon dont cela peut être fait maintenant, veuillez consulter quelques-unes des nombreuses réponses à cette question qui sont apparues entre-temps sur SO. Mais, s'il vous plaît, restez-vous de faire d'autres commentaires à cette réponse car il est évidemment inutile. Je vous remercie.

Simplement mettre JavaScript n'est pas destiné à faire ce que vous demandez. Quel que soit le service que vous rencontrez qui offre la possibilité de manipuler des images sélectionnées, vous pouvez parier votre argent que l'image a été téléchargée complètement sur le serveur avant que toute autre fonctionnalité n'ait été offerte.

Vous pouvez le faire en utilisant base64, consultez le site Web avec lequel je travaille: http://www.wordirish.com toutes les images sont manipulées côté client en utilisant HTML5 ou flash pour les anciens navigateurs.

Vous avez juste besoin de le faire:

function thisFunctionShoulBeCallByTheFileuploaderButton(e){ e.preventDefault && e.preventDefault(); var image, canvas, i; var images = 'files' in e.target ? e.target.files : 'dataTransfer' in e ? e.dataTransfer.files : []; if(images && images.length) { for(i in images) { if(typeof images[i] != 'object') continue; image = new Image(); image.src = createObjectURL(images[i]); image.onload = function(e){ var mybase64resized = resizeCrop( e.target, 200, 150 ).toDataURL('image/jpg', 90); alert(mybase64resized); } } } } function resizeCrop( src, width, height ){ var crop = width == 0 || height == 0; // not resize if(src.width <= width && height == 0) { width = src.width; height = src.height; } // resize if( src.width > width && height == 0){ height = src.height * (width / src.width); } // check scale var xscale = width / src.width; var yscale = height / src.height; var scale = crop ? Math.min(xscale, yscale) : Math.max(xscale, yscale); // create empty canvas var canvas = document.createElement("canvas"); canvas.width = width ? width : Math.round(src.width * scale); canvas.height = height ? height : Math.round(src.height * scale); canvas.getContext("2d").scale(scale,scale); // crop it top center canvas.getContext("2d").drawImage(src, ((src.width * scale) - canvas.width) * -.5 , ((src.height * scale) - canvas.height) * -.5 ); return canvas; } function createObjectURL(i){ var URL = window.URL || window.webkitURL || window.mozURL || window.msURL; return URL.createObjectURL(i); } 

part de gâteau 😉

Vous pouvez les recadrer à l'aide de HTML5 Canvas:

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

Les navigateurs modernes supportent maintenant une grande quantité de manipulation d'images via les versions jquery et html5. Les outils qui peuvent être utilisés pour y parvenir sont les suivants:

Redimensionner et recadrer pour Jquery (ClientSide)

Bibliothèque de traitement d'image Pixastic

Optimisation de l'image de l'image HTML5

J'espère que cela s'avère utile pour ceux qui recherchent des solutions similaires …