From 68d9e4682ea61fbb9b3417139028f927dfcc7bc5 Mon Sep 17 00:00:00 2001 From: Luca Conte Date: Mon, 5 May 2025 20:04:03 +0200 Subject: [PATCH] initial commit --- index.html | 24 +++++++++++++++++ script.js | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 18 +++++++++++++ 3 files changed, 120 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..ef1f796 --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + + + Convy + + + + +
+ +
+ Or drag & drop + +
+ + +
+
+ + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..2674bdd --- /dev/null +++ b/script.js @@ -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); + }; +} + diff --git a/style.css b/style.css new file mode 100644 index 0000000..d176b48 --- /dev/null +++ b/style.css @@ -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; +} \ No newline at end of file