Discussion :

[mendoz]

Bonjour,

J'ai un script qui redimensionne automatiquement les images avant l'upload, récupéré du site https://oldsite.andreafortuna.org/pr...-image-resize/
Il marche nickel pour les images qui ont un poids modérée (quelques ko) mais quand il s'agit d'images plus grosses, cela devient aléatoire, et souvent ça enregistre une image vide de 1ko.
J'ai l'impression qu'il génère le png avant que l'image soit entièrement chargée.

Le javascript n'est pas mon fort , comment faire pour :
- attendre que l'image soit entièrement chargée avant de la créer
- vérifier que l'image soit entièrement chargée

Le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
function doUpload() {
        var file = document.getElementById('fileToUpload').files[0];
        var dataUrl = "";
        // Create an image
        var img = document.createElement("img");
        // Create a file reader
        var reader = new FileReader();
        // Set the image once loaded into file reader
        reader.onload = function(e)
        {
            img.src = e.target.result;
 
            var canvas = document.createElement("canvas");
            //var canvas = $("<canvas>", {"id":"testing"})[0];
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);
 
            // Set Width and Height
            var MAX_WIDTH = 400;
            var MAX_HEIGHT = 300;
            var width = img.width;
            var height = img.height;
 
            if (width > height) {
              if (width > MAX_WIDTH) {
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
              }
            } else {
              if (height > MAX_HEIGHT) {
                width *= MAX_HEIGHT / height;
                height = MAX_HEIGHT;
              }
            }
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);
 
            dataUrl = canvas.toDataURL("image/png");
            document.getElementById('image_preview').src = dataUrl;    
 
            // Post the data
            var fd = new FormData();
            fd.append("image", dataUrl);
 
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "savetofile.php");
            xhr.send(fd);
 
        }
        // Load files into file reader
        reader.readAsDataURL(file);
      }

Merci !

[mendoz]

Bonjour

J'ai avancé sur mon problème, j'enregistre bien mon image avec les dimensions souhaitées (400px), c'est parfait
Par contre en voulant rajouter une étape, je n'arrive pas à :
1- choisir l'image à uploader et la redimensionner
2- l'afficher et pouvoir mettre un commentaire
3- envoyer l'image déjà redimensionnée

Sur le point 3 ça télécharge l'image originale, ce qui prends du temps avec les images lourdes.

Je n'arrive pas à dissocier les 2 étapes.
Le lien vers mon script : http://mendoz.fr/resizzze/
Le code est visible et voici le code du savetofile.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?php
if (isset($_POST['image'])) {
    file_put_contents("uploads/test_taille.png",base64_decode(str_replace("data:image/png;base64,","", $_POST['image'])));
    echo 'Upload completed !';
}
else {}
?>

Merci pour votre aide