Redimensionnement de l'image avant le téléchargement

Question

Je dois fournir à un utilisateur un moyen de télécharger des photos sur son site Web au format jpeg. Cependant, les photos sont très grandes en taille originale et je voudrais que l'option de redimensionnement avant le téléchargement soit très facile pour l'utilisateur. Il semble que mes seules options soient une application côté client qui redimensionne les photos avant de les télécharger via un service Web, ou un crochet JavaScript côté client sur l'opération de téléchargement qui redimensionne les images. La deuxième option est très provisoire car je ne dispose pas d'une bibliothèque JavaScript de redimensionnement des images et il sera difficile d'obtenir que le JavaScript exécute mon outil de redimensionnement actuel, ImageMagick.

Je suis sûr que ce n'est pas un scénario trop rare, et des suggestions ou des indications sur les sites qui le font seront appréciées.

Answer 1

En 2011, nous pouvons le faire avec l'API Fichier et le canevas. Cela ne fonctionne pour l'instant que dans firefox et chrome. Voici un exemple :

var file = YOUR_FILE,
    fileType = file.type,
    reader = new FileReader();

reader.onloadend = function() {
  var image = new Image();
      image.src = reader.result;

  image.onload = function() {
    var maxWidth = 960,
        maxHeight = 960,
        imageWidth = image.width,
        imageHeight = image.height;

    if (imageWidth > imageHeight) {
      if (imageWidth > maxWidth) {
        imageHeight *= maxWidth / imageWidth;
        imageWidth = maxWidth;
      }
    }
    else {
      if (imageHeight > maxHeight) {
        imageWidth *= maxHeight / imageHeight;
        imageHeight = maxHeight;
      }
    }

    var canvas = document.createElement('canvas');
    canvas.width = imageWidth;
    canvas.height = imageHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0, imageWidth, imageHeight);

    // The resized file ready for upload
    var finalFile = canvas.toDataURL(fileType);
  }
}

reader.readAsDataURL(file);

Answer 2

Il existe des technologies multiples Outil de téléchargement qui déclare qu'il peut redimensionner avant le téléchargement, mais je ne l'ai pas encore essayé. J'ai également trouvé une réponse appropriée dans mon question sur la gestion des images binaires dans les librairies javascript .

Answer 3

Vous avez plusieurs possibilités :

1. Java
2. ActiveX (uniquement sur Windows)
3. Silverlight
4. Flash
5. Flex
6. Engrenages Google (la version la plus récente est capable de redimensionner et de faire un glisser-déposer depuis votre bureau)

J'ai fait beaucoup de recherches pour trouver une solution similaire à celle que vous avez décrite et il y a beaucoup de solutions qui varient beaucoup en qualité et en flexibilité.

Ma suggestion est de trouver une solution qui fera 80% de ce dont vous avez besoin et de la personnaliser pour répondre à vos besoins.

Answer 4

Je pense que vous avez besoin de Java ou d'ActiveX pour cela. Par exemple Téléchargement d'images fines

Answer 5

Ce que disent jao et russau est vrai. La raison en est que JavaScript n'a pas accès au système de fichiers local pour des raisons de sécurité. Si JavaScript pouvait "voir" vos fichiers image, il pourrait voir n'importe quel fichier, et c'est dangereux.

Pour ce faire, vous avez besoin d'un contrôle au niveau de l'application, ce qui signifie Flash, Java ou Active-X.