Skip to content

Commit a124524

Browse files
simonwsimonw
authored
image-to-jpeg.html
I built this one using GPT-4 back in April 2023 https://gist.github.com/simonw/66918b6cde1f87bf4fc883c67735195d
1 parent d97ff4e commit a124524

File tree

1 file changed

+123
-0
lines changed

1 file changed

+123
-0
lines changed

‎image-to-jpeg.html

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Drag and Drop Image</title>
5+
<style>
6+
#dropzone {
7+
width: 500px;
8+
height: 100px;
9+
border: 2px dashed #ccc;
10+
text-align: center;
11+
padding: 20px;
12+
margin-bottom: 20px;
13+
}
14+
#output {
15+
width: 500px;
16+
margin-bottom: 20px;
17+
}
18+
textarea {
19+
width: 500px;
20+
height: 100px;
21+
}
22+
.container {
23+
margin-bottom: 20px;
24+
}
25+
#fileInput {
26+
display: none;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div id="dropzone">Click or drag and drop an image here</div>
32+
<input type="file" id="fileInput" accept="image/*">
33+
<div class="container">
34+
<label for="qualityRange">JPEG Quality: <span id="qualityValue">75</span></label><br>
35+
<input type="range" id="qualityRange" min="0" max="100" value="75" />
36+
</div>
37+
<img id="output" src="" alt="Converted Image" /><br>
38+
<div class="container">
39+
<label for="imgDataUri">Image Data URI:</label><br>
40+
<textarea id="imgDataUri" readonly></textarea>
41+
</div>
42+
<div id="jpegSize">JPEG Size: 0 bytes</div>
43+
44+
<script>
45+
const dropzone = document.getElementById('dropzone');
46+
const fileInput = document.getElementById('fileInput');
47+
dropzone.addEventListener('click', () => {
48+
fileInput.click();
49+
});
50+
51+
fileInput.addEventListener('change', () => {
52+
const file = fileInput.files[0];
53+
if (file && file.type.startsWith('image/')) {
54+
const reader = new FileReader();
55+
reader.onload = (e) => {
56+
imgSrc = e.target.result;
57+
updateImage();
58+
};
59+
reader.readAsDataURL(file);
60+
} else {
61+
alert('Please select an image file.');
62+
}
63+
});
64+
const output = document.getElementById('output');
65+
const imgDataUri = document.getElementById('imgDataUri');
66+
const qualityRange = document.getElementById('qualityRange');
67+
const qualityValue = document.getElementById('qualityValue');
68+
const jpegSize = document.getElementById('jpegSize');
69+
let imgSrc;
70+
71+
dropzone.addEventListener('dragover', (e) => {
72+
e.preventDefault();
73+
dropzone.style.backgroundColor = '#f0f0f0';
74+
});
75+
76+
dropzone.addEventListener('dragleave', () => {
77+
dropzone.style.backgroundColor = '';
78+
});
79+
80+
dropzone.addEventListener('drop', (e) => {
81+
e.preventDefault();
82+
dropzone.style.backgroundColor = '';
83+
84+
const file = e.dataTransfer.files[0];
85+
if (file && file.type.startsWith('image/')) {
86+
const reader = new FileReader();
87+
reader.onload = (e) => {
88+
imgSrc = e.target.result;
89+
updateImage();
90+
};
91+
reader.readAsDataURL(file);
92+
} else {
93+
alert('Please drop an image file.');
94+
}
95+
});
96+
97+
qualityRange.addEventListener('input', () => {
98+
qualityValue.textContent = qualityRange.value;
99+
updateImage();
100+
});
101+
102+
function updateImage() {
103+
if (!imgSrc) return;
104+
const img = new Image();
105+
img.onload = () => {
106+
const canvas = document.createElement('canvas');
107+
const ctx = canvas.getContext('2d');
108+
const aspectRatio = img.height / img.width;
109+
canvas.width = 500;
110+
canvas.height = 500 * aspectRatio;
111+
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
112+
const quality = qualityRange.value / 100;
113+
const dataUrl = canvas.toDataURL('image/jpeg', quality);
114+
output.src = dataUrl;
115+
imgDataUri.value = `<img src="${dataUrl}" alt="Converted Image" />`;
116+
const size = Math.round(dataUrl.length * 3 / 4); // Approximate size in bytes
117+
jpegSize.textContent = `JPEG Size: ${size.toLocaleString()} bytes`;
118+
};
119+
img.src = imgSrc;
120+
}
121+
</script>
122+
</body>
123+
</html>

0 commit comments

Comments
 (0)