Image redimensionner avant de les télécharger sans aperçu javascript

Je veux éviter le téléchargement de gros/lourd des fichiers d'image.

Je préfère HTML5 FileAPI bibliothèque pour ce travail.

Toutes les autres fonctionnalités sont ajoutées (upload, re-commande, etc.), donc, j'ai seulement besoin de l'image-redimensionner la fonction.

CAS:

Sur la page, il y a une entrée pour plusieurs fichiers.

Sur l'entrée de modifier l'événement (lors de l'ajout de fichiers), redimensionner les images et/ou fichiers et de les ajouter à FormData(), puis envoyer le FormData() pour script PHP via ajax.

EXEMPLE:

$('input').on('change',function(){
   var formData = resizeImages(this.files[0]);   
   uploadResizedImages(formData);
});

function resizeImages(files){
   formData = new FormData();

   //For each image, resize it and append to formData
   //resize file part missing....
   formData.append('files[]',this);//Appending to formData (this = currently iterated file)

   return formData;//Return the formData with resized images
}

Quelqu'un?

Grâce

OriginalL'auteur Bralemili | 2016-02-03

  1. 9

    Dans mon expérience, vous ne pouvez pas manipuler l'image sur le côté client de télécharger une image manipulé en contact par l'intermédiaire d'un fichier de saisie dans un formulaire.

    La façon dont je l'ai fait ce que vous essayez de le faire dans le passé implique quelques étapes.

    1. Sélectionner l'image à l'aide d'un fichier d'entrée
    2. Lire le fichier comme un dataURL
    3. Utiliser de la toile de manipuler l'image en tant que de besoin
    4. D'exportation de la nouvelle image de dataUrl
    5. Utiliser ajax pour charger l'image sur le serveur en tant que dataURL
    6. Utilisation côté serveur les fonctions de convertir la dataUrl à une image et la stocker

    https://jsfiddle.net/0hmhumL1/

    function resizeInCanvas(img){
  ///////// 3-3 manipulate image
    var perferedWidth = 2700;
  var ratio = perferedWidth / img.width;
  var canvas = $("<canvas>")[0];
  canvas.width = img.width * ratio;
  canvas.height = img.height * ratio;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0,0,canvas.width, canvas.height);
  //////////4. export as dataUrl
  return canvas.toDataURL();
}

    Lors du téléchargement d'un dataUrl vous augmentez la taille (largeur de bande nécessaire) de l'image manipulé par environ 20% de sorte que vous ne pouvez pas voir les économies que vous cherchez, sauf si vous changez la taille de l'image considérablement.

    Je veux que la taille de l'image max de 1920 x 1080. Quand je prends des photos avec mon appareil photo, la résolution est 6000x4000 et la taille est de 8 mo à 20 Mo. Par redimensionnement, il serait d'environ ~2 Mo (on l'espère). Aussi, je pense que je peux ajouter jpg qualité de réduction de diminuer encore plus les tailles. Btw. vais-je recevoir ces dataURL est que la variable $_FILES en PHP ou $_POST? Je vous remercie pour votre réponse.
    Ce sur le retour de la DataURL pour objet Blob, ajouter à FormData et ensuite l'envoyer?
    Vous cloud le faire
    Basé sur votre question précédente. ssi vous changer votre preferredWidth à 1920, la solution serait re taille correctement les images. Je ne suis pas un programmeur php, donc je ne sais pas la réponse, mais ma conjecture serait $_POST puisqu'il n'est pas plus en fait d'un fichier et simplement les données transférées
    J'ai essayé cette... cependant, la taille du fichier se termine donc beaucoup plus élevé, avec de la toile...original 37 ko et téléchargé la version par la suite être 387kb... ce qui donne?

    OriginalL'auteur QBM5