Bonjour,

J'étais en train de tester un code pour redimensionner une image avant envoi PHP:

Voilà que le fait de mettre un 'alert' me bloque tout le code sous FireFox... alors que cela marche sous chrome....

Voici le code:

Voir l'endroit où j'ai mis : """ // <<<<<<< CE 'ALERT' BLOQUE FIREFOX MAIS PAS Chrome !!!!???? """


Je me suis basé sur ceci... http://tech.novapost.fr/redimensionn...t-lupload.html

Code HTML : 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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Redimentionnement Image en JQUERY</title>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <style type="text/css">
 
    </style>
</head>
 
<body>
<p>Redimentionnement Image en JQUERY</p>
 
<img id = "img_Id2" src="" class="card-img" alt="no image found :-(">
<div for="imgFile_Id2" class="card-body">
    <input name="imgFileData[]" id="imgFile_Id2" class="input-file" type="file" accept=".gif,.jpg,.png,.jpeg">
</div>
 
<script>
    $(document).ready(function () {
 
        $("[id^=img_Id]").click(function () { // CLIC === OK
            imgSource = $(this);
            input = imgSource.parent().find('input');
            input.click();
        });
 
        $("[id^=imgFile]").change(function () { // OK
            readURL2(this);
        });
 
        function readURL2(input) {
            var current_file = input.files[0];
            var reader = new FileReader();
 
            if (current_file.type.indexOf('image') == 0) {
                reader.onload = function (event) {
                    var image = new Image();
                    image.src = event.target.result;
 
                    alert(image.src); // <<<<<<<   CE 'ALERT' BLOQUE FIREFOX MAIS PAS Chrome !!!!????
 
                    image.onload = function() {
 
                        // ICI OK pour FIREFOX & Chrome
                        alert('Je suis ici');
 
                        var maxWidth = 1024,
                            maxHeight = 1024,
                            imageWidth = image.width,
                            imageHeight = image.height;
 
 
                        if (imageWidth > imageHeight) {
                            if (imageWidth > maxWidth) {
                                imageHeight *= maxWidth / imageWidth;
                                imageWidth = maxWidth;
                            }
                        }
                        else {
                            if (imageHeight > maxHeight) {
                                imageWidth *= maxHeight / imageHeight;
                                imageHeight = maxHeight;
                            }
                        }
 
                        var canvas = document.createElement('canvas');
                        canvas.width = imageWidth;
                        canvas.height = imageHeight;
                        image.width = imageWidth;
                        image.height = imageHeight;
                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(this, 0, 0, imageWidth, imageHeight);
 
                        $("#img_Id2").attr('src', canvas.toDataURL(current_file.type));
                    }
                };
                reader.readAsDataURL(current_file);
            }
        }
    });
 
</script>

Est-ce un beug ou est-ce normal ?

Merci