【整点没用的】古法图像处理

使用Jimp进行简单图像处理

由于种种原因，最近看了一点数字图像处理。由于只会js，所以准备用jimp这个可以进行简单图片处理的库来玩一玩。

本文不涉及数字图像处理概念，只介绍一个例子将图片和背景进行拆分。

0.准备

首先准备一张图片，这里用的是ai生成的。

解析数据-c8b76329.png

然后准备一个vue3的空白工程项目，后续用它展示提取到的像素信息。

1.提取原始图片信息

通过ai给的例子对图片信息进行提取（这里偷懒直接通过main.js写到windows里）



import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { Jimp } from "jimp";
import { intToRGBA } from "jimp";
// 定义特性标志
window.__VUE_PROD_DEVTOOLS__ = false;
window.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;
window.demopath = "https://file.fishpi.cn/2025/03/解析数据-c8b76329.png?imageView2/2/w/768/format/webp/interlace/1";
window.outputpath =  "output.jpg";
// danger 获取demo图片数据
Jimp.read(window.demopath)
  .then((image) => {
    // 获取图片的宽度和高度
    const width = image.bitmap.width;
    const height = image.bitmap.height;
    window.demoWidth = width;
    window.demoHeight = height;
    // 遍历每一个像素点
    const data = [];
    for (let y = 0; y < height; y++) {
      for (let x = 0; x < width; x++) {
        // 获取当前像素点的颜色值（以 32 位整数表示）
        const color = image.getPixelColor(x, y);
        // 将 32 位整数颜色值转换为 RGBA 对象
        const rgba = intToRGBA(color);
        const hexColor = `#${rgba.r.toString(16).padStart(2, "0")}${rgba.g
          .toString(16)
          .padStart(2, "0")}${rgba.b.toString(16).padStart(2, "0")}`;
        data.push({
          x,
          y,
          rgba,
          color,
          hexColor,
        });
      }
    }
    window.demoData = data;
  })
  .catch((err) => {
    console.error("读取图片时出现错误:", err);
  });

createApp(App).use(router).mount("#app");

2.颜色列表统计

这是一张1024*1024的图片，所以一共有1,048,576个像素点，也就是1,048,576个像素信息。从图片看显而易见里面有大量相同颜色的像素点，我需要对其进行统计。


/**
 * 统计像素
 */

export function collectColors(dataArray) {
  const colorInfo = {};
  for (let i = 0; i < dataArray.length; i++) {
    const color = dataArray[i].color;
    const hexColor = dataArray[i].hexColor;
    if (colorInfo[color]) {
      colorInfo[color].count++;
    } else {
      colorInfo[color] = {
        count: 1,
        hexColor,
      };
    }
  }

  return sortObjectByCount(colorInfo);
}

function sortObjectByCount(obj) {
  // 将对象转换为数组，数组元素为 [key, value] 形式
  const entries = Object.entries(obj);
  // 根据 count 值对数组进行排序
  const end = entries.sort((a, b) => b[1].count - a[1].count);
  // 将排序后的数组转换回对象
  return end;
}

最后这就是我得到的像素统计信息，其中中间的数字代表统计数量：

3.手动色值处理

这里收集到了色值信息，现在我根据背景色颜色对图像进行处理，首先尝试第一个最多的色值，将其替换为黑色。


// import { Jimp } from "jimp";
const { Jimp } = require("jimp");

const demopath = "https://file.fishpi.cn/2025/03/解析数据-c8b76329.png?imageView2/2/w/768/format/webp/interlace/1";
const output = "output.jpg";
async function modifyPixelGloble(aim = []) {
  try {
    // 读取图片
    // const image = await Jimp.read(window.demopath);
    const image = await Jimp.read(demopath);

    const width = image.bitmap.width;
    const height = image.bitmap.height;
    // 遍历指定区域内的像素
    for (let x = 0; x < width; x++) {
      for (let y = 0; y < height; y++) {
        // 获取当前像素点的颜色值（以 32 位整数表示）
        const color = image.getPixelColor(x, y);
        aim.map((item) => {
          if (Number(item) == color) {
            // 设置新的像素颜色
            image.setPixelColor(4278190080, x, y);
          }
        });
      }
    }

    // 保存修改后的图片
    await image.write(output);
    console.log("图片修改并保存成功");
  } catch (error) {
    console.error("处理图片时出错:", error);
  }
}

modifyPixelGloble([
  237124863
]);