lgc
/
convy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

This commit is contained in:
Luca Conte 2025-05-05 20:04:03 +02:00
commit 68d9e4682e
3 changed files with 120 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Convy</title>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<div id="dragOverlay" style="display: none;">
Drop file to convert
</div>
<input type="file" id="upload"><br>
Or drag & drop
<canvas id="cv" style=""></canvas>
<div id="downloadButtons">
<button id="downloadPng">png</button>
<button id="downloadWebp">webp</button>
</div>
</div>
</body>
</html>

78
script.js Normal file
View File

@ -0,0 +1,78 @@
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("upload").addEventListener("input", () => {
if(document.getElementById("upload").files.length > 0) {
const file = document.getElementById("upload").files[0];
let image;
if (file.type.startsWith("image/")) {
image = URL.createObjectURL(file);
renderImageOnCanvas(image);
} else {
alert("Please upload a valid image file.");
return;
}
}
});
document.getElementById("downloadPng").addEventListener("click", () => {
const canvas = document.getElementById("cv");
const link = document.createElement("a");
link.download = "canvas.png";
link.href = canvas.toDataURL();
link.click();
});
document.getElementById("downloadWebp").addEventListener("click", () => {
const canvas = document.getElementById("cv");
const link = document.createElement("a");
link.download = "canvas.webp";
link.href = canvas.toDataURL("image/webp");
link.click();
});
document.addEventListener("drag", () => {
document.getElementById("dragOverlay").style.display = "";
});
document.addEventListener("dragenter", () => {
document.getElementById("dragOverlay").style.display = "";
});
document.addEventListener("dragover", (e) => {
e.preventDefault();
document.getElementById("dragOverlay").style.display = "";
});
document.addEventListener("dragend", (e) => {
e.preventDefault();
document.getElementById("dragOverlay").style.display = "none";
});
document.addEventListener("dragleave", () => {
document.getElementById("dragOverlay").style.display = "none";
});
document.addEventListener("drop", (e) => {
e.preventDefault();
document.getElementById("dragOverlay").style.display = "none";
const files = e.dataTransfer.files;
if (files.length > 0) {
const file = files[0];
let image;
if (file.type.startsWith("image/")) {
image = URL.createObjectURL(file);
renderImageOnCanvas(image);
} else {
alert("Please upload a valid image file.");
return;
}
}
});
});
function renderImageOnCanvas(image) {
const canvas = document.getElementById("cv");
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = image;
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
}

18
style.css Normal file
View File

@ -0,0 +1,18 @@
#dragOverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
#cv {
display: block;
}