JavaScript 기반의 이미지 자르기 기능 구현

const imageCanvas = document.getElementById('imageCanvas'); const ctx = imageCanvas.getContext('2d'); let image = null; function loadImage() { const input = document.createElement('input'); input.type = 'file'; input.accept = 'image/*'; input.onchange = function(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = function(e) { const img = new Image(); img.onload = function() { ctx.clearRect(0, 0, imageCanvas.width, imageCanvas.height); ctx.drawImage(img, 0, 0, imageCanvas.width, imageCanvas.height); image = img; }; img.src = e.target.result; }; reader.readAsDataURL(file); }; input.click(); } function cropImage() { if (image) { const cropCanvas = document.createElement('canvas'); const cropCtx = cropCanvas.getContext('2d'); cropCanvas.width = 400; cropCanvas.height = 400; cropCtx.drawImage(image, 0, 0, cropCanvas.width, cropCanvas.height); const croppedImage = cropCanvas.toDataURL('image/jpeg'); window.open(croppedImage); } else { alert('请先上传图片'); } }