Image-Editor/index.html at main · vironite-23/Image-Editor · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Processing</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdn.rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script>
    <style>
        body { font-family: Arial, sans-serif; }
        #output { margin-top: 20px; }
    </style>
</head>
<body>
    <h1>Upload Zip File</h1>
    <input type="file" id="fileInput" accept=".zip" />
    <button id="processButton">Process Images</button>
    <div id="output"></div>

    <script>
        document.getElementById('processButton').addEventListener('click', async () => {
            const fileInput = document.getElementById('fileInput');
            if (fileInput.files.length === 0) return;

            const zip = new JSZip();
            const file = fileInput.files[0];
            const content = await file.arrayBuffer();
            const zipContent = await zip.loadAsync(content);
            const imagePromises = [];

            zipContent.forEach((relativePath, file) => {
                if (file.name.match(/\.png$/)) {
                    imagePromises.push(file.async("blob").then(blob => {
                        const img = new Image();
                        img.src = URL.createObjectURL(blob);
                        return new Promise((resolve) => {
                            img.onload = () => {
                                const canvas = document.createElement('canvas');
                                const ctx = canvas.getContext('2d');
                                canvas.width = img.width;
                                canvas.height = img.height;
                                ctx.drawImage(img, 0, 0);
                                // Adjust contrast, brightness, saturation here
                                // Example: ctx.filter = 'contrast(1.5) brightness(1.2) saturate(1.3)';
                                ctx.filter = `
                                saturate(152%)
                                contrast(90%)
                                brightness(114%)
                                `;
                               // const contrastValue = 99; // Sesuaikan dengan format yang digunakan oleh ctx.filter
                                //const brightnessValue = 139; // Sesuaikan dengan format yang digunakan oleh ctx.filter
                               // const saturationValue = 132; // Sesuaikan dengan format yang digunakan oleh ctx.filter

                               // ctx.filter = `contrast(${contrastValue}%) brightness(${brightnessValue}%) saturate(${saturationValue}%)`;
                                ctx.drawImage(img, 0, 0);
                                canvas.toBlob((newBlob) => {
                                    resolve({ name: file.name, blob: newBlob });
                                });
                            };
                        });
                    }));
                }
            });

            const processedImages = await Promise.all(imagePromises);
            const newZip = new JSZip();
            processedImages.forEach(image => {
                newZip.file(image.name, image.blob);
            });

            const newZipBlob = await newZip.generateAsync({ type: "blob" });
            const url = URL.createObjectURL(newZipBlob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'processed_images.zip';
            document.getElementById('output').innerHTML = '';
            document.getElementById('output').appendChild(a);
            a.click();
        });
    </script>
</body>
</html>