Redimensionner l'image avant le téléchargement - convertir en toile pour un objet de Fichier

Voici le fragment de code que j'utilise maintenant pour télécharger plusieurs images à l'aide de HTML5 Fichier API:

/**
 * @param {FileList} files
 */
upload: function(files){
    nfiles = files.length;

    for (var i = 0; i < nfiles; i++) {
        /** @var file File **/
        var file = files[i];

        var xhr = new XMLHttpRequest();

        xhr.open("POST", settings.post_upload, true);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.upload.filenumb = i;
        xhr.filenumb = i;
        xhr.upload.filename = file.name;

        var nef = new FormData();
        nef.append("folder", settings.folder);
        nef.append("file_element", settings.file_elem);
        nef.append("udata", settings.user_data);
        nef.append(settings.file_elem, file);
        xhr.send(nef);

    }
}

Je voudrais redimensionner les images avant charger à l'aide de toile objet, mais ne pas avoir de l'expérience avec cela, je ne sais pas comment mettre à jour le code à l'aide de techniques, par exemple celle décrite ici: HTML5 Pré-redimensionner les images avant de les télécharger

canvas.toDataURL("image/png"); renvoie une chaîne codée. Mais j'ai besoin de mettre la File objet.

Modifier

Comment écririez-vous (raisonnablement) la fonction de navigateur pour la plupart des navigateurs modernes pour redimensionner le Fichier avant de le télécharger, de manutention jpg,png et gif avec transparence:

/** 
 * @param {File} file 
 * @param int max_width
 * @param int max_height
 * @param float compression_ratio
 * @returns File
 */
function resize(file, max_width, max_height, compression_ratio){}
  • quel est le problème avec le serveur côté redimensionnement?
  • +1 sur les raisons de la redimensionner besoins/doit être sur le côté client.
  • Je me figure qu'il veut utiliser le pouvoir des clients au lieu de perdre du CPU sur le serveur par le redimensionnement d'images...
  • Quand je suis à la masse téléchargement de 200 grandes images, je peux économiser beaucoup de temps de transfert et de ressources du serveur.
  • Côté Client, le redimensionnement est le mieux pour la planète. Pourquoi passer des encombrants de transfert des images par le biais de l'internet, manger ressources d'internet? Il est comme tout le monde pense que l'internet fonctionne sur magique poussière de lutin, il n'est pas, il s'exécute sur l'énergie et les émissions de CO2. googleblog.blogspot.com/2009/05/energy-and-internet.html. Envisager la planète prochaine fois que vous écrivez un programme pour redimensionner vos images.
InformationsquelleAutor Sfisioza | 2013-04-13
  1. 25

    Essayer quelque chose comme cela:

    function resize(file, max_width, max_height, compression_ratio, imageEncoding){
var fileLoader = new FileReader(),
canvas = document.createElement('canvas'),
context = null,
imageObj = new Image(),
blob = null;            
//create a hidden canvas object we can use to create the new resized image data
canvas.id     = "hiddenCanvas";
canvas.width  = max_width;
canvas.height = max_height;
canvas.style.visibility   = "hidden";   
document.body.appendChild(canvas);  
//get the context to use 
context = canvas.getContext('2d');  
//check for an image then
//trigger the file loader to get the data from the image         
if (file.type.match('image.*')) {
fileLoader.readAsDataURL(file);
} else {
alert('File is not an image');
}
//setup the file loader onload function
//once the file loader has the data it passes it to the 
//image object which, once the image has loaded, 
//triggers the images onload function
fileLoader.onload = function() {
var data = this.result; 
imageObj.src = data;
};
fileLoader.onabort = function() {
alert("The upload was aborted.");
};
fileLoader.onerror = function() {
alert("An error occured while reading the file.");
};  
//set up the images onload function which clears the hidden canvas context, 
//draws the new image then gets the blob data from it
imageObj.onload = function() {  
//Check for empty images
if(this.width == 0 || this.height == 0){
alert('Image is empty');
} else {                
context.clearRect(0,0,max_width,max_height);
context.drawImage(imageObj, 0, 0, this.width, this.height, 0, 0, max_width, max_height);
//dataURItoBlob function available here:
//http://stackoverflow.com/questions/12168909/blob-from-dataurl
//add ')' at the end of this function SO dont allow to update it without a 6 character edit
blob = dataURItoBlob(canvas.toDataURL(imageEncoding));
//pass this blob to your upload function
upload(blob);
}       
};
imageObj.onabort = function() {
alert("Image load was aborted.");
};
imageObj.onerror = function() {
alert("An error occured while loading image.");
};
}

    Veuillez noter:

    De travail avec fileloaders et le chargement des images, il y a des retards et de la fonction est donc asynchrone donc essayer de simplement retourner les données blob ne fonctionnent pas. Vous avez besoin d'attendre pour le chargement avant de se produire, vous pouvez utiliser les données chargées, et de déclencher un appel de votre fonction de téléchargement pour CHAQUE fichier.

    Aussi fileloader peut avoir certains navigateur compatibilité questions, mais je ne pense pas que c'est possible de toute autre manière, côté client.

    • En général, cela fonctionne, mais puisque c'est un bounty, je voudrais faire 2 notes. Tout d'abord, FileReader a quelques problèmes de disponibilité: IE<10, Safari<courant, android<3X (demandez peut-être si l'OP si c'est acceptable). Ensuite, vous devez ajouter un onerror gestionnaire lorsque le chargement des images de sorte que vous pouvez réessayer/fail/alerte si quelque chose va mal et dans onload assurez-vous de tester pour zéro largeur/hauteur (se produit lorsque la charge réussit, mais le fichier est vide). Après ces changements, semble assez bon.
    • Merci pour cette Marque. Désolé, je suis tout nouveau ici et encore à apprendre 🙂
    • Ce n'est pas parfait, mais qui m'a aidé à écrire la solution qui convient à mes besoins = bounty est le vôtre, merci 🙂 ps. Si quelqu'un est déjà en utilisant cette technique, je serais heureux d'entendre les mises à jour sur la prise en charge du navigateur.
    • quelle a été votre solution? Je cherche à faire quelque chose de similaire.
    InformationsquelleAutor Brendon John Wildbore
  2. 3

    Côté Client image redimensionner

    L'Option 1. Utiliser le Pica bibliothèque (https://github.com/nodeca/pica)

    L'Option 2. Utiliser les éléments suivants script personnalisé (http://jsfiddle.net/cL3hapL4/2/)

    var file = document.getElementById('imageUpload');
var mime = "image/jpeg";
var max_width = 100;
var max_height = 100;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
//Clear canvas, and resize image
ctx.clearRect(0, 0, max_width, max_height);
ctx.drawImage(img,
0, 0, img.width, img.height, //size of image
0, 0, max_width, max_height //size of canvas
);
//Get image from canvas as a dataURI, and convert to a blob object
var dataURI = canvas.toDataUrl(mime);
//Note: This function can be replaced with canvas.toBlob(),
//once supported by browsers.
//---
var image_blob = (function () {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: mime});
})();
//---
//Attach blob-object (contains our image) to form object
var form = new Form();
form.append("image", image_blob);
//Send AJAX request with multi-part data
var xhr = new XMLHttpRequest();
xhr.open('POST', '/route', true);
xhr.send(form);
//jQuery version
//$.ajax({
//   type: "POST",
//   url: "/route",
//   data: form,
//   processData: false,
//   contentType: false
//})
//.done(function (response) {
//   console.log(response);
//});
};
img.src = URL.createObjectURL(file);
    InformationsquelleAutor tfmontague
  3. 2

    Vous pouvez appeler toBlob sur le <canvas> élément. Cela renvoie un Blob, qui est le parent de l'interface de File. Vous pouvez ensuite envoyer cet objet à votre serveur via XHR2.

    • Oui, j'ai trouvé des similaires réponse ici: stackoverflow.com/questions/4998908/..., mais je ne suis pas sûr de la meilleure solution (prise en charge du navigateur)
    • Quelles sont vos exigences? Quelle est votre question?
    InformationsquelleAutor Ray Nicholus