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