签名图片_清除背景，白底黑字（不完整代码，上传刷新上传就会成功）

本文链接：https://blog.youkuaiyun.com/weixin_56274002/article/details/143320984

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扣签名07</title>
    <style>
        #progressHbar {
            width: 80%;
            height: 20px;
            background-color: #f0f0f0;
            position: relative;
            cursor: pointer;
            margin-top: 50px;
        }

        #progress {
            height: 100%;
            background-color: #4caf50;
        }

        #progress-value {
            position: absolute;
            top: -40px;
            left: 50px;
            transform: translateX(-50%);
            background-color: rgba(255, 255, 255, 0.8);
            padding: 5px 10px;
            border-radius: 5px;
            pointer-events: none;
        }
    </style>
</head>

<body>
    <form id="imageUploadForm">
        <label for="imageInput">选择要上传的图像：</label>
        <input type="file" id="imageInput" accept="image/*">
    </form>
    <div id="imagePreviewContainer" style="display:none;">
        <h2>上传的图像预览：</h2>
        <img id="imagePreview" src="#" alt="上传的图像预览">
        <canvas id="canvasPreview" style="display:none;" willReadFrequently="true"></canvas>
    </div>
    <button id="downloadButton" style="display:none;">下载处理后的图像</button>
    <div id="progressHbar" style="display:none;">
        <div id="progress"></div>
        <div id="progress-value">0</div>
    </div>

    <script>
        var img;
        var imageData;
        var data;
        var threshold = 80; //调整这个数值。直到图片清楚
        var total = 255
        var dataTemp = [];
        const progressBar = document.getElementById('progressHbar');
        const progress = document.getElementById('progress');
        const progressValue = document.getElementById('progress-value');
        var canvas = document.getElementById('canvasPreview');
        var ctx = canvas.getContext('2d');
        canvas.willReadFrequently = true;
        document.getElementById('imageInput').addEventListener('change', function () {
            var file = this.files[0];
            var dataTemp = [];
            var imageData = undefined;
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById('imagePreview').src = e.target.result;
                document.getElementById('imagePreviewContainer').style.display = 'block';
                document.getElementById('progressHbar').style.display = 'block';
                document.getElementById('downloadButton').style.display = 'block';

                // Automatically update threshold after loading image
                updateThreshold();
            };
            reader.readAsDataURL(file);
        });

        function updateThreshold() {
            var img = document.getElementById('imagePreview');
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            var data = imageData.data;
            var total = data.length / 4; // Total number of pixels
            var sum = 0;

            for (var i = 0; i < data.length; i += 4) {
                var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
                if (avg < threshold) {
                    data[i] = data[i + 1] = data[i + 2] = 0;
                } else {
                    data[i] = data[i + 1] = data[i + 2] = 255;
                }
            }
            ctx.putImageData(imageData, 0, 0);
            img.src = canvas.toDataURL(); // Display threshold value
            document.getElementById('progress-value').innerText = Math.round(threshold) + ' (' + Math.round((threshold /
                255) * 100) + '%)';
        }
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扣签名05</title>
    <style>
        #progress-bar {
            width: 80%;
            height: 20px;
            background-color: #f0f0f0;
            position: relative;
            cursor: pointer;
            margin-top: 50px;
        }

        #progress {
            height: 100%;
            background-color: #4caf50;
        }

        #progress-value {
            position: absolute;
            top: -40px;
            left: 50px;
            transform: translateX(-50%);
            background-color: rgba(255, 255, 255, 0.8);
            padding: 5px 10px;
            border-radius: 5px;
            pointer-events: none;
        }
    </style>
</head>

<body>
    <h1>扣签名05</h1>
    <!-- 上传 -->
    <form id="imageUploadForm">
        <label for="imageInput">选择要上传的图像：</label>
        <input type="file" id="imageInput" accept="image/*">
        <!-- <button type="submit">上传</button> -->
    </form>
    <div id="imagePreviewContainer" style="display:none;">
        <h2>上传的图像预览：</h2>
        <img id="originalImage" src="#" alt="上传的原图">
        <img id="imagePreview" src="#" alt="上传的图像预览">
        <canvas id="canvasPreview" style="display:none;" willReadFrequently="true"></canvas>
    </div>
    <!-- 下载 -->
    <button id="downloadButton" style="display:none;">下载处理后的图像</button>

    <div id="progress-bar" style="display:none;">
        <div id="progress"></div>
        <div id="progress-value">0</div>
    </div>

    <hr style="margin-top: 100px;">
    <div>
        问题剩余：<br>
        1.再次上传图片 抠出来的签名还是原来的
    </div>
    <script>
        var img;
        // 获取图像数据
        var imageData;
        var data;
        var threshold = 100; //调整签名清新度阈值， 根据实际情况调整
        var total = 200 // 滚动条的最大值
        var dataTemp = []; //复制出来的图片原来像素数组
        //进度条部分 (0-200)
        const progressBar = document.getElementById('progress-bar'); // 总条
        const progress = document.getElementById('progress'); // 绿条
        const progressValue = document.getElementById('progress-value'); // 显示的值
        // 创建画布
        var canvas = document.getElementById('canvasPreview');
        var ctx = canvas.getContext('2d');
        canvas.willReadFrequently = true;

        // 上传图片部分
        document.getElementById('imageInput').addEventListener('change', function () {
            var file = this.files[0];
            dataTemp = []
            imageData = undefined

            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById('originalImage').src = e.target.result;
                document.getElementById('imagePreview').src = e.target.result;
                document.getElementById('imagePreviewContainer').style.display = 'block';
                document.getElementById('progress-bar').style.display = 'block';
                document.getElementById('downloadButton').style.display = 'block';
            };
            reader.readAsDataURL(file);
        });

        // 设置绿条初始位置 (百分比 threshold/总)
        progress.style.width = threshold / total * 100 + '%';
        document.getElementById('progress-value').innerText = `${threshold}（${threshold / total * 100 + '%'}）`
        let isDragging = false;
        progressBar.addEventListener('mousedown', function (e) {
            isDragging = true;
            updateProgress(e);
        });
        document.addEventListener('mouseup', function () {
            isDragging = false;
        });
        document.addEventListener('mousemove', function (e) {
            if (isDragging) {
                updateProgress(e);
            }
        });

        // 改变绿条和值
        function updateProgress(e) {
            // 总
            const rect = progressBar.getBoundingClientRect();
            let progressWidth = (e.clientX - rect.left) / rect.width * 100;
            progressWidth = Math.min(Math.max(progressWidth, 0), 100); // constrain within 0-100%
            // 绿条宽度
            progress.style.width = progressWidth + '%';
            // 数字以及数字的位置
            threshold = Math.round(progressWidth) * 2
            progressValue.textContent = `${threshold}（${Math.round(progressWidth)}%）`;
            progressValue.style.left = `${progressWidth}%`;
            // 从这里拉动滚动条  然后改变虚值  然后同时刷新预览图像
            // 现在值变了 // 扣签名 预览图像改变
            img = document.getElementById('imagePreview');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);


            console.log('imageData', imageData)


            //   判断
            if (!imageData) {
                console.log('进入判断')
                imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            }



            data = imageData.data;
            if (dataTemp.length == 0) {
                copyData(data, dataTemp);
            }

            copyData(dataTemp, data);

            // 执行签名扣除的处理  简单的黑白阈值处理，假设签名为黑色，背景为白色

            for (var i = 0; i < data.length; i += 4) {
                var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
                if (avg < threshold) { // 扣除签名部分 
                    data[i] = data[i + 1] = data[i + 2] = 0; // 黑色 
                } else { // 保留背景部分 
                    data[i] = data[i + 1] = data[i + 2] = 255; // 白色 
                }
            }
            // 将处理后的图像数据放回Canvas 

            imageData.data = data

            ctx.putImageData(imageData, 0, 0); // 显示处理后的图像
            img.src = canvas.toDataURL();
        }

        // 复制图像信息方法
        function copyData(srcArr, targetArr) {
            for (var i = 0; i < srcArr.length; i++) {
                targetArr[i] = srcArr[i];
            }
        }

        // 下载处理后的图像
        document.getElementById('downloadButton').addEventListener('click', function () {
            var canvas = document.getElementById('canvasPreview');
            var link = document.createElement('a');
            link.href = canvas.toDataURL();
            link.download = 'processed_image.png';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    </script>
</body>

</html>