Redimension d'image avant upload HTML5

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:

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 !