xmort.github.io/index.html at master · xMort/xmort.github.io · 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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <title>WEBP to JPG</title>
        <style>
            body {
                padding-top: 3rem;
                text-align: center;
                font-family: Verdana,serif;
            }
            input {
                border: 1px solid gray;
                border-radius: 10px;
                padding: 2rem;
            }
            img, a {
                display: none;
            }
            img {
                width: auto;
                height: auto;
            }
            a {
                font-size: 40px;
                text-decoration: none;
            }
            a:hover {
               text-decoration: underline;
            }
            div {
                padding: 2rem;
            }
        </style>
    </head>
    <body>
        <input type="file" onchange="previewFile()"><br>
        <div>
            <a id="downloadLink" href="#" download="image.jpg">Download</a><br>
        </div>
        <img src="" alt="Image preview">
    </body>
    <script>
        let dataUrl = null;

        const preview = document.querySelector('img');
        const downloadLink = document.getElementById("downloadLink");

        preview.addEventListener('load', function (event) {
            const img = event.currentTarget;
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');

            canvas.width = img.width;
            canvas.height = img.height;
            context.drawImage(img, 0, 0);

            const jpgDataUrl = canvas.toDataURL('image/jpeg', 1.0);

            img.src = jpgDataUrl;
            downloadLink.href = jpgDataUrl;
            downloadLink.innerHTML = "Download (" + downloadLink.download + ")";

            img.style.display = "inline";
            downloadLink.style.display = "inline";
        }, false);

        function previewFile() {
            const file = document.querySelector('input[type=file]').files[0];
            const downloadLink = document.getElementById("downloadLink");
            const reader = new FileReader();

            reader.addEventListener("load", function () {
                preview.src = reader.result;
                dataUrl = reader.result;
                downloadLink.download = file.name.substring(0, file.name.lastIndexOf(".")) + ".jpg";
            }, false);

            if (file) {
                reader.readAsDataURL(file);
            }
        }
    </script>
</html>