Mercurial
annotate mrjunejune/src/tools/file_converter/index.js @ 216:e82b80b24012 default tip
[MrJuneJune] Make webp translate background job.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Sat, 28 Feb 2026 21:04:43 -0800 |
| parents | be91a73d801a |
| children |
| rev | line source |
|---|---|
|
93
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
1 async function convertImageToWebP() |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
2 { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
3 const input = document.getElementById('imageInput'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
4 const btn = document.getElementById('convertImageBtn'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
5 const loading = document.getElementById('imageLoading'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
6 const result = document.getElementById('imageResult'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
7 const message = document.getElementById('imageMessage'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
8 const download = document.getElementById('imageDownload'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
9 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
10 if (!input.files || !input.files[0]) |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
11 { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
12 alert('Please select an image file first'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
13 return; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
14 } |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
15 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
16 const file = input.files[0]; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
17 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
18 // Show loading state |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
19 btn.disabled = true; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
20 loading.classList.add('show'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
21 result.classList.remove('show', 'success', 'error'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
22 download.style.display = 'none'; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
23 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
24 try { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
25 const response = await fetch('/api/convert/image-to-webp', { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
26 method: 'POST', |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
27 body: file, |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
28 headers: { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
29 'Content-Type': file.type |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
30 } |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
31 }); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
32 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
33 loading.classList.remove('show'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
34 result.classList.add('show'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
35 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
36 if (response.ok) { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
37 const data = await response.json(); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
38 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
39 download.href = data.download_url; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
40 download.download = file.name.replace(/\.[^/.]+$/, '') + '.webp'; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
41 download.style.display = 'inline-block'; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
42 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
43 message.textContent = 'Conversion successful! Link expires in ' + data.expires + '.'; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
44 result.classList.add('success'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
45 } else { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
46 const text = await response.text(); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
47 message.textContent = 'Conversion failed: ' + text; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
48 result.classList.add('error'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
49 } |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
50 } catch (error) { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
51 loading.classList.remove('show'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
52 result.classList.add('show', 'error'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
53 message.textContent = 'Error: ' + error.message; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
54 } finally { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
55 btn.disabled = false; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
56 } |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
57 } |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
58 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
59 async function convertVideoToMP4() { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
60 const input = document.getElementById('videoInput'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
61 const btn = document.getElementById('convertVideoBtn'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
62 const loading = document.getElementById('videoLoading'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
63 const result = document.getElementById('videoResult'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
64 const message = document.getElementById('videoMessage'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
65 const download = document.getElementById('videoDownload'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
66 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
67 if (!input.files || !input.files[0]) { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
68 alert('Please select a video file first'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
69 return; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
70 } |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
71 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
72 const file = input.files[0]; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
73 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
74 // Show loading state |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
75 btn.disabled = true; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
76 loading.classList.add('show'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
77 result.classList.remove('show', 'success', 'error'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
78 download.style.display = 'none'; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
79 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
80 try { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
81 const response = await fetch('/api/convert/video-to-mp4', { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
82 method: 'POST', |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
83 body: file, |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
84 headers: { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
85 'Content-Type': file.type |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
86 } |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
87 }); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
88 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
89 loading.classList.remove('show'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
90 result.classList.add('show'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
91 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
92 if (response.ok) { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
93 const data = await response.json(); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
94 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
95 download.href = data.download_url; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
96 download.download = file.name.replace(/\.[^/.]+$/, '') + '.mp4'; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
97 download.style.display = 'inline-block'; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
98 |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
99 message.textContent = 'Conversion successful! Link expires in ' + data.expires + '.'; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
100 result.classList.add('success'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
101 } else { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
102 const text = await response.text(); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
103 message.textContent = 'Conversion failed: ' + text; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
104 result.classList.add('error'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
105 } |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
106 } catch (error) { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
107 loading.classList.remove('show'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
108 result.classList.add('show', 'error'); |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
109 message.textContent = 'Error: ' + error.message; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
110 } finally { |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
111 btn.disabled = false; |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
112 } |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
113 } |
|
be91a73d801a
[MrJuneJune] Updated my website.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
114 |