diff --git a/resources/views/esign/sign/sign.blade.php b/resources/views/esign/sign/sign.blade.php index 2aaefe1b..be928f91 100644 --- a/resources/views/esign/sign/sign.blade.php +++ b/resources/views/esign/sign/sign.blade.php @@ -83,6 +83,35 @@ if (padRef.current) padRef.current.clear(); }; + const removeBackground = (img) => { + const canvas = document.createElement('canvas'); + canvas.width = img.naturalWidth; + canvas.height = img.naturalHeight; + const ctx = canvas.getContext('2d'); + ctx.drawImage(img, 0, 0); + + const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); + const data = imageData.data; + const threshold = 210; + + for (let i = 0; i < data.length; i += 4) { + const r = data[i], g = data[i + 1], b = data[i + 2]; + const brightness = r * 0.299 + g * 0.587 + b * 0.114; + if (brightness > threshold) { + data[i + 3] = 0; + } else { + // 반투명 경계를 부드럽게 처리 + const fade = Math.max(0, (brightness - (threshold - 40)) / 40); + if (fade > 0) { + data[i + 3] = Math.round(data[i + 3] * (1 - fade)); + } + } + } + + ctx.putImageData(imageData, 0, 0); + return canvas.toDataURL('image/png'); + }; + const handleStampUpload = (e) => { const file = e.target.files?.[0]; if (!file) return; @@ -98,8 +127,13 @@ } const reader = new FileReader(); reader.onload = (ev) => { - setStampPreview(ev.target.result); - setStampData(ev.target.result.replace(/^data:image\/\w+;base64,/, '')); + const img = new Image(); + img.onload = () => { + const transparentDataUrl = removeBackground(img); + setStampPreview(transparentDataUrl); + setStampData(transparentDataUrl.replace('data:image/png;base64,', '')); + }; + img.src = ev.target.result; }; reader.readAsDataURL(file); }; @@ -275,7 +309,8 @@ className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text ) : (
배경이 자동 제거되었습니다
+