photo editer

Online Photo Editor

const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); let img; Load Image const loadImg = (e) => { img = new Image(); img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); }; img.src = URL.createObjectURL(e.target.files[0]); }; Crop Image const cropImg = () => { const croppedCanvas = document.createElement("canvas"); const croppedCtx = croppedCanvas.getContext("2d"); croppedCanvas.width = canvas.width / 2; croppedCanvas.height = canvas.height / 2; croppedCtx.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2, 0, 0, croppedCanvas.width, croppedCanvas.height); canvas.width = croppedCanvas.width; canvas.height = croppedCanvas.height; ctx.drawImage(croppedCanvas, 0, 0); }; Apply Filter const filterImg = () => { ctx.filter = "grayscale(100%)"; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; Save Image const saveImg = () => { const link = document.createElement("a"); link.download = "edited-image.png"; link.href = canvas.toDataURL("image/png"); link.click(); }; // Event Listeners document.getElementById("file-input").addEventListener("change", loadImg); document.getElementById("crop-btn").addEventListener("click", cropImg); document.getElementById("filter-btn").addEventListener("click", filterImg); document.getElementById("save-btn").addEventListener("click", saveImg);