黑白图片去水印

73327424 · 发表于 5 天前

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？点击文字激活账号

×

图片批量处理工具

这是一个基于浏览器的图片批量处理工具，主要用于处理图片的透明度和颜色。
打包html地址：[https://wwyp.lanzoul.com/iBqZQ2l68sqh]()

部分代码基于开源项目：[https://github.com/Caozefu/ImageDewatermarking]()

注意：仅支持白底黑字图片，如表格图片，黑白Logo等

使用

方法一：复制下方源码，本地新建html文件，将代码粘贴进去，双击用浏览器打开即可
方法二：打开打包好的html地址：https://wwyp.lanzoul.com/iBqZQ2l68sqh 。下载、解压、浏览器打开test.html。

主要功能
1. 图片处理规则
将纯白色区域（RGB: 255, 255, 255）转换为透明
将接近白色的区域（R/G/B > 200）转换为透明
将深色区域（R/G/B < 35）转换为纯黑色
1. 批量处理功能
支持同时选择多张图片上传
提供图片预览列表，显示处理前后的效果
支持单张图片处理和批量处理
每张图片显示处理状态（待处理/处理中/已完成）
1. 下载功能
支持单张图片下载
支持批量打包下载（ZIP格式）
处理后的图片自动添加"processed_"前缀

使用方法

1.上传图片
点击文件选择按钮
可以一次选择多张图片
支持常见图片格式（PNG/JPG/JPEG等）

处理图片
单张处理：点击每张图片下方的"处理"按钮
批量处理：点击顶部的"批量处理"按钮

下载图片
单张下载：点击处理完成的图片下方的"下载"按钮
批量下载：点击顶部的"批量下载"按钮，将生成ZIP压缩包

技术特点
纯前端实现，无需服务器
使用 Canvas 进行图片处理
使用 JSZip 实现批量打包下载
支持实时预览处理效果
响应式布局，适配不同屏幕尺寸

使用场景
批量处理产品图片
去除图片白色背景
统一处理图片深色区域
制作透明背景图片

浏览器兼容性

支持现代浏览器（Chrome、Firefox、Safari、Edge等）

[i]

73327424 · 发表于 5 天前

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
      * {
         margin: 0;
         padding: 0;
      }

      ul,
      li {
         list-style: none;
      }

      #show {
         display: none;
      }

      .dom {
         width: 470px;
         height: 430px;
         margin: 50px;
      }

      .dom li {
         width: 1px;
         height: 1px;
         float: left;
         background-color: #cdff97;
      }

      /* 新增样式 */
      .image-container {
         margin: 20px 50px;
      }

      .image-list {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         gap: 20px;
      }

      .image-item {
         border: 1px solid #eee;
         padding: 15px;
         border-radius: 8px;
      }

      .image-item .preview {
         width: 100%;
         height: 200px;
         object-fit: contain;
         margin-bottom: 10px;
         background: #f5f5f5;
      }

      .image-item .info {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 10px;
      }

      .image-item .filename {
         font-size: 14px;
         color: #333;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
      }

      .image-item .status {
         padding: 4px 8px;
         border-radius: 4px;
         font-size: 12px;
      }

      .status.pending {
         background: #fff3cd;
         color: #856404;
      }

      .status.processing {
         background: #cce5ff;
         color: #004085;
      }

      .status.completed {
         background: #d4edda;
         color: #155724;
      }

      .btn {
         padding: 8px 16px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         font-size: 14px;
      }

      .btn-primary {
         background: #007bff;
         color: white;
      }

      .btn-success {
         background: #28a745;
         color: white;
      }

      .btn:disabled {
         background: #6c757d;
         cursor: not-allowed;
      }

      .actions {
         margin: 20px 50px;
         display: flex;
         gap: 10px;
      }

      .result-preview {
         max-width: 100%;
         height: auto;
         margin-top: 10px;
      }

      .download-btn {
         display: inline-block;
         margin-top: 10px;
         text-decoration: none;
         padding: 4px 8px;
         background: #28a745;
         color: white;
         border-radius: 4px;
         font-size: 12px;
      }

      .download-all-btn {
         background: #17a2b8;
         color: white;
         margin-left: auto;
      }

      .download-all-btn:disabled {
         background: #6c757d;
      }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
</head>

<body>
<div class="actions">
      <input type="file" value="" id="upload" accept="image/*" multiple>
      <button class="btn btn-primary" id="processAllBtn" disabled>批量处理</button>
      <button class="btn download-all-btn" id="downloadAllBtn" disabled>批量下载</button>
</div>

<div class="image-container">
      <div class="image-list" id="imageList"></div>
</div>

<canvas id="canvas" style="display: none;"></canvas>
<img src="" alt="" id="show" style="display: none;">

<script>
      let imageQueue = [];

      function updateImageStatus(id, status) {
         const statusElement = document.querySelector(`#image-${id} .status`);
         statusElement.textContent = status;
         statusElement.className = `status ${status.toLowerCase()}`;
      }

      async function processImage(imageData) {
         return new Promise((resolve) => {
            const img = new Image();
            img.onload = function () {
                  const canvas = document.getElementById("canvas");
                  canvas.width = img.width;
                  canvas.height = img.height;
                  const ctx = canvas.getContext("2d");
                  ctx.drawImage(img, 0, 0);
                  const imageData = ctx.getImageData(0, 0, img.width, img.height);

                  // 使用 white2other.js 中的处理逻辑
                  for (let i = 0; i < imageData.height; ++i) {
                     for (let j = 0; j < imageData.width; ++j) {
                        const x = i * 4 * imageData.width + 4 * j;
                        let r = imageData.data[x];
                        let g = imageData.data[x + 1];
                        let b = imageData.data[x + 2];
                        let a = imageData.data[x + 3];

                        if (r === 255 && g === 255 && b === 255) {
                              a = 0;
                        } else if (r > 200 || g > 200 || b > 200) {
                              r = 255;
                              g = 255;
                              b = 255;
                              a = 0;
                        }
                        if (r < 35 || g < 35 || b < 35) {
                              r = 0;
                              g = 0;
                              b = 0;
                        }

                        imageData.data[x] = r;
                        imageData.data[x + 1] = g;
                        imageData.data[x + 2] = b;
                        imageData.data[x + 3] = a;
                     }
                  }

                  ctx.putImageData(imageData, 0, 0);
                  const resultUrl = canvas.toDataURL();
                  resolve(resultUrl);
            };
            img.src = imageData.dataUrl;
         });
      }

      async function processSingleImage(id) {
         const imageData = imageQueue.find(img => img.id === id);
         if (!imageData || imageData.status === 'completed') return;

         updateImageStatus(id, 'processing');
         const resultUrl = await processImage(imageData);

         imageData.status = 'completed';
         imageData.resultUrl = resultUrl;
         updateImageStatus(id, 'completed');

         // 更新预览图和下载链接
         const resultPreview = document.querySelector(`#image-${id} .result-preview`);
         resultPreview.src = resultUrl;
         resultPreview.style.display = 'block';

         const downloadBtn = document.querySelector(`#image-${id} .download-btn`);
         downloadBtn.href = resultUrl;
         downloadBtn.style.display = 'inline-block';

         // 在处理完成后检查是否有已处理完成的图片
         const hasCompletedImages = imageQueue.some(img => img.status === 'completed');
         document.getElementById('downloadAllBtn').disabled = !hasCompletedImages;
      }

      async function processAllImages() {
         const processAllBtn = document.getElementById('processAllBtn');
         const downloadAllBtn = document.getElementById('downloadAllBtn');
         processAllBtn.disabled = true;

         for (const imageData of imageQueue) {
            if (imageData.status === 'pending') {
                  await processSingleImage(imageData.id);
            }
         }

         processAllBtn.disabled = false;
         downloadAllBtn.disabled = false;
      }

      function createImageList() {
         const imageList = document.getElementById('imageList');
         imageList.innerHTML = '';

         imageQueue.forEach(item => {
            const div = document.createElement('div');
            div.className = 'image-item';
            div.id = `image-${item.id}`;

            div.innerHTML = `
                  <img src="${item.dataUrl}" class="preview">
                  <div class="info">
                     <span class="filename">${item.file.name}</span>
                     <span class="status pending">待处理</span>
                  </div>
                  <button class="btn btn-success process-btn" onclick="processSingleImage('${item.id}')">处理</button>
                  <img src="" class="result-preview" style="display: none;">
                  <a class="download-btn" download="${item.file.name}" style="display: none;">下载</a>
            `;

            imageList.appendChild(div);
         });

         document.getElementById('processAllBtn').disabled = false;
      }

      function handleFileSelect(event) {
         const files = Array.from(event.target.files);

         files.forEach(file => {
            const reader = new FileReader();
            reader.onload = function (e) {
                  imageQueue.push({
                     id: Date.now() + Math.random().toString(36).substr(2, 9),
                     file: file,
                     dataUrl: e.target.result,
                     status: 'pending'
                  });
                  createImageList();
            };
            reader.readAsDataURL(file);
         });
      }

      // 添加新的批量下载函数
      async function downloadAllImages() {
         const completedImages = imageQueue.filter(img => img.status === 'completed');
         if (completedImages.length === 0) {
            alert('没有已处理完成的图片！');
            return;
         }

         const zip = new JSZip();
         const downloadBtn = document.getElementById('downloadAllBtn');
         downloadBtn.disabled = true;
         downloadBtn.textContent = '打包中...';

         try {
            // 将所有处理后的图片添加到zip中
            for (const img of completedImages) {
                  // 将base64转换为二进制
                  const base64Data = img.resultUrl.split(',')[1];
                  const binaryData = atob(base64Data);
                  const arrayBuffer = new ArrayBuffer(binaryData.length);
                  const uint8Array = new Uint8Array(arrayBuffer);

                  for (let i = 0; i < binaryData.length; i++) {
                     uint8Array = binaryData.charCodeAt(i);
                  }

                  // 获取文件扩展名
                  const extension = img.file.name.split('.').pop();
                  const fileName = `processed_${img.file.name}`;

                  zip.file(fileName, uint8Array);
            }

            // 生成zip文件并下载
            const content = await zip.generateAsync({ type: 'blob' });
            const zipUrl = URL.createObjectURL(content);

            const downloadLink = document.createElement('a');
            downloadLink.href = zipUrl;
            downloadLink.download = `processed_images_${new Date().getTime()}.zip`;
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);

            // 清理
            URL.revokeObjectURL(zipUrl);
         } catch (error) {
            console.error('打包下载出错：', error);
            alert('打包下载失败，请重试！');
         } finally {
            downloadBtn.disabled = false;
            downloadBtn.textContent = '批量下载';
         }
      }

      window.onload = function () {
         document.getElementById('upload').onchange = handleFileSelect;
         document.getElementById('processAllBtn').onclick = processAllImages;
         document.getElementById('downloadAllBtn').onclick = downloadAllImages;
      }
</script>

</body>

</html>

账号		自动登录	找回密码
密码			点击文字激活账号

[其他转载] 黑白图片去水印

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

图片批量处理工具

注意：仅支持白底黑字图片，如表格图片，黑白Logo等

使用

主要功能

使用方法

1.上传图片

处理图片

下载图片

技术特点

使用场景

浏览器兼容性

最佳新人

活跃会员

热心会员

推广达人

宣传达人

灌水之王

突出贡献

优秀版主

荣誉管理

论坛元老

!servicecenter!

!feedback!

更多主题