Daumen/script1.js at main · pgreat123/Daumen · GitHub

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
let currentImage = null;

const imageInput = document.getElementById("imageInput");
const effectSelector = document.getElementById("effectSelector");
const originalCanvas = document.getElementById("originalCanvas");
const effectCanvas = document.getElementById("effectCanvas");
const originalCtx = originalCanvas.getContext("2d");
const effectCtx = effectCanvas.getContext("2d");

imageInput.addEventListener("change", function (event) {
    const file = event.target.files[0];
    if (!file) return;

    currentImage = new Image();
    currentImage.src = URL.createObjectURL(file);
    currentImage.onload = () => {
        drawOriginalImage();
        applyEffect(effectSelector.value);
    };
});

effectSelector.addEventListener("change", function () {
    if (currentImage) {
        applyEffect(effectSelector.value);
    }
});

function drawOriginalImage() {
    originalCanvas.width = effectCanvas.width = currentImage.width;
    originalCanvas.height = effectCanvas.height = currentImage.height;
    originalCtx.drawImage(currentImage, 0, 0, currentImage.width, currentImage.height);
}

function applyEffect(effectType) {
    effectCtx.clearRect(0, 0, effectCanvas.width, effectCanvas.height);
    effectCtx.drawImage(currentImage, 0, 0, effectCanvas.width, effectCanvas.height);

    let imageData = effectCtx.getImageData(0, 0, effectCanvas.width, effectCanvas.height);
    let pixels = imageData.data;

    switch (effectType) {
        case "sketch":
            for (let i = 0; i < pixels.length; i += 4) {
                const avg = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
                pixels[i] = pixels[i + 1] = pixels[i + 2] = avg;
            }
            break;
        case "vintage":
            for (let i = 0; i < pixels.length; i += 4) {
                pixels[i] = pixels[i] * 0.9 + 30;
                pixels[i + 1] = pixels[i + 1] * 0.8 + 20;
                pixels[i + 2] = pixels[i + 2] * 0.6;
            }
            break;
        case "cartoon":
            for (let i = 0; i < pixels.length; i += 4) {
                pixels[i] = Math.round(pixels[i] / 50) * 50;
                pixels[i + 1] = Math.round(pixels[i + 1] / 50) * 50;
                pixels[i + 2] = Math.round(pixels[i + 2] / 50) * 50;
            }
            break;
        case "oilPainting":
            for (let i = 0; i < pixels.length; i += 4) {
                pixels[i] = pixels[i] * 1.2;
                pixels[i + 1] = pixels[i + 1] * 1.1;
                pixels[i + 2] = pixels[i + 2] * 0.9;
            }
            break;
        case "watercolor":
            for (let i = 0; i < pixels.length; i += 4) {
                pixels[i] = pixels[i] * 0.8 + 20;
                pixels[i + 1] = pixels[i + 1] * 0.9 + 15;
                pixels[i + 2] = pixels[i + 2] * 1.2;
            }
            break;
        case "neonGlow":
            for (let i = 0; i < pixels.length; i += 4) {
                pixels[i] = 255 - pixels[i];
                pixels[i + 1] = 255 - pixels[i + 1];
                pixels[i + 2] = 255 - pixels[i + 2];
            }
            break;
        case "pixelArt":
            for (let i = 0; i < pixels.length; i += 4) {
                let avg = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
                avg = Math.floor(avg / 50) * 50;
                pixels[i] = pixels[i + 1] = pixels[i + 2] = avg;
            }
            break;
        case "halftone":
            for (let i = 0; i < pixels.length; i += 4) {
                let avg = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
                avg = avg > 128 ? 255 : 0;
                pixels[i] = pixels[i + 1] = pixels[i + 2] = avg;
            }
            break;
        case "cyberpunk":
            for (let i = 0; i < pixels.length; i += 4) {
                pixels[i] = pixels[i] * 1.5;
                pixels[i + 1] = pixels[i + 1] * 0.6;
                pixels[i + 2] = pixels[i + 2] * 1.8;
            }
            break;
        case "stencil":
            for (let i = 0; i < pixels.length; i += 4) {
                let avg = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
                avg = avg > 128 ? 255 : 0;
                pixels[i] = pixels[i + 1] = pixels[i + 2] = avg;
            }
            break;
    }

    effectCtx.putImageData(imageData, 0, 0);
}