Bonjour.

J'essaye de faire une classe javascript me permettant de manipuler une image avec un canvas. Jusqu’à présent j'ai réussi à faire les changements souhaités( contraste, luminosité, noir&blanc, etc ...). Seulement les modifications de contraste et de luminosité ne fonctionne qu'une fois. Je m'explique. Ces modifications sont appliqués à l'aide d'un curseur allant de -100 à 100. Si je déplace le curseur à la valeur 100. Tout ce passe très bien. Mon image deviens très lumineuse. Seulement si je le ramène à 0, je ne retrouve pas l'image de départ. Après quelque recherche, cela viens du format RGB qui ne peut stocker que 255 valeur pour chaque couleur. Ainsi en haute luminosité. l'image est "brulée et perd des informations. Pour contrer ce phénomène je passe mon image d'un Uint8 clampe à un Int32Array permettant de contenir plus de valeur. Je fais mes changement et je rechange mon Int32Arrayen Uint8 clampe
pour mettre à jour le canvas. Seulement voila. Rien ne se passe au moment du cast. Voici mon 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
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
85
86
87
88
89
 
function CanvasEffect(canvas) {
    var ctx = canvas.getContext("2d");
    var WIDTH = canvas.width;
    var HEIGHT = canvas.height;
    var stack = [];
    var imageData;
    var data;
 
    this.apply = function(effect, intensity) {
        if(data == undefined) {
            imageData = ctx.getImageData(0,0, WIDTH, HEIGHT);
            var imgData = imageData.data;
            // Save the data of the orignal file.
            data= new Int32Array(imgData);
        }
        var int = Number(intensity);
        var refresh =  true;
        switch (effect) {
        case "blur":
            refresh = false;
            stackBlurCanvasRGB('canvas', 0, 0,  WIDTH, HEIGHT, int);
            break;
        case "sharpen":
 
            break;
        case "luminosity":
            console.log("stack['luminosity'] : " + stack["luminosity"]);
            lastInt = (stack["luminosity"] == undefined) ? 0 : stack["luminosity"];
            newInt = int - lastInt;
            console.log("int : " + int, "lastInt : " + lastInt, "newInt : " + newInt);
            for(var i=0;i < data.length;i+=4) {
                data[i] += newInt; //Red
                data[i+1] += newInt; //Green
                data[i+2] += newInt; //Blue
            }
            break;
        case "contrast":
            lastInt = (stack["contrast"] == undefined) ? 0 : stack["contrast"];
            newInt = int - lastInt;
            var factor = (259 * (newInt + 255)) / (255 * (259 - newInt));
            for(var i = 0; i < data.length ; i+=4) {
                data[i] = factor *  (data[i] - 128) + 128; //Red
                data[i+1] = factor *  (data[i+1] - 128) + 128; //Green
                data[i+2] = factor *  (data[i+2] - 128) + 128; //Blue
            }
            break;
        case "negatif":
            console.log("negatif");
            for(var i=0;i < data.length;i+=4) {
                data[i] = 256-data[i]; //Red
                data[i+1] = 256-data[i+1]; //Green
                data[i+2] = 256 - data[i+2]; //Blue
            }
            break;
        case "b&w":
            console.log("b&w");
            for(var i=0;i < data.length;i+=4) {
                var gris = data[i]*0.3 + data[i+1]*0.59 + data[i+2]*0.11;
                data[i] = gris; //Red
                data[i+1] = gris; //Green
                data[i+2] = gris; //Blue
            }
            break;
        case "sepia":
            console.log("sepia");
            for(var i=0;i < data.length;i+=4) {
                var r = data[i]*0.299 + data[i+1]*0.587 + data[i+2]*0.114;
                data[i] = Math.max(0, Math.min(255, r*1.351)); //Red
                data[i+1] = Math.max(0, Math.min(255, r*1.203)); //Green
                data[i+2] = Math.max(0, Math.min(255, r*0.937)); //Blue
            }
            break;
        default:
            break;
        }
 
        if(refresh) {
            // Voici le code qui ne fonctionne pas
            var clampedArray = new Uint8ClampedArray(data); // Conversion vers un Uint8ClampedArray. 
            var newImgData=ctx.createImageData( WIDTH, HEIGHT);
            newImgData.data = clampedArray;
            console.log(newImgData.data, clampedArray);
            ctx.putImageData(newImgData,0 ,0);
            console.log(imgData.data);
        }
        stack[effect] = int;
    };
}
Si quelqu'un à une idée. Je suis preneur. Je sèche la dessus depuis quelque temps déjà