79 lines
2.3 KiB
JavaScript
79 lines
2.3 KiB
JavaScript
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);
|
|
};
|
|
}
|
|
|