Site updated: 2026-05-13 16:50:34

2026-05-13 16:50:38 +08:00
parent 8f2e89e58c
commit 54f0d09b31
361 changed files with 204078 additions and 0 deletions
--- a/js/tools/remove-bg.js
+++ b/js/tools/remove-bg.js
@@ -0,0 +1,103 @@
+(function() {
+    let originalImg = null;
+    let targetR=255, targetG=255, targetB=255;
+
+    function initRemoveBgTool() {
+        const container = document.getElementById('tool-removebg-container');
+        if (!container) return;
+
+        container.addEventListener('click', (e) => e.stopPropagation());
+
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const fileInput = document.getElementById('file-input');
+        const toleranceInput = document.getElementById('tolerance');
+        const tolVal = document.getElementById('tol-val');
+        const targetColorBox = document.getElementById('target-color');
+        const targetColorText = document.getElementById('target-color-text');
+        const btnReset = document.getElementById('btn-reset');
+        const btnDownload = document.getElementById('btn-download');
+        const uploadBox = document.getElementById('upload-box');
+
+        uploadBox.addEventListener('click', () => fileInput.click());
+
+        fileInput.addEventListener('change', function(e) {
+            if (!e.target.files.length) return;
+            const reader = new FileReader();
+            reader.onload = (ev) => {
+                const img = new Image();
+                img.onload = () => {
+                    originalImg = img;
+                    renderImage();
+                };
+                img.src = ev.target.result;
+            };
+            reader.readAsDataURL(e.target.files[0]);
+        });
+
+        function renderImage() {
+            if (!originalImg) return;
+            canvas.width = originalImg.width;
+            canvas.height = originalImg.height;
+            ctx.drawImage(originalImg, 0, 0);
+        }
+
+        btnReset.addEventListener('click', renderImage);
+
+        canvas.addEventListener('click', function(e) {
+            if (!originalImg) return;
+            
+            const rect = canvas.getBoundingClientRect();
+            const scaleX = canvas.width / rect.width;
+            const scaleY = canvas.height / rect.height;
+            
+            const x = (e.clientX - rect.left) * scaleX;
+            const y = (e.clientY - rect.top) * scaleY;
+            
+            const p = ctx.getImageData(x, y, 1, 1).data;
+            targetR = p[0];
+            targetG = p[1];
+            targetB = p[2];
+            
+            const hex = "#" + ((1 << 24) + (targetR << 16) + (targetG << 8) + targetB).toString(16).slice(1);
+            targetColorBox.style.background = hex;
+            targetColorText.innerText = hex;
+            
+            processRemoval();
+        });
+
+        function processRemoval() {
+            if (!originalImg) return;
+            ctx.drawImage(originalImg, 0, 0);
+            
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const data = imageData.data;
+            const tolerance = parseInt(toleranceInput.value);
+
+            for (let i = 0; i < data.length; i += 4) {
+                const r = data[i], g = data[i+1], b = data[i+2];
+                const dist = Math.sqrt(Math.pow(r - targetR, 2) + Math.pow(g - targetG, 2) + Math.pow(b - targetB, 2));
+                
+                if (dist < tolerance * 1.5) {
+                    data[i+3] = 0;
+                }
+            }
+            ctx.putImageData(imageData, 0, 0);
+        }
+        
+        toleranceInput.addEventListener('input', () => {
+            tolVal.innerText = toleranceInput.value;
+        });
+        toleranceInput.addEventListener('change', processRemoval);
+
+        btnDownload.addEventListener('click', () => {
+            const link = document.createElement('a');
+            link.download = 'removed-bg.png';
+            link.href = canvas.toDataURL();
+            link.click();
+        });
+    }
+
+    document.addEventListener('DOMContentLoaded', initRemoveBgTool);
+    document.addEventListener('pjax:complete', initRemoveBgTool);
+})();