🎨 像素风复古大法好！手撸 PoToPi：图片秒变马赛克，单片机也能秀操作！
|
折腾

声明：

这是一个开源项目（好多都是从Github上抄的😜），这是一个基于：

  • 前端： HTML, CSS, JavaScript
  • 后端： Node.js, 图片处理库Sharp

开发的

前言：

最近沉迷复古风，看着满大街的像素风游戏和头像，手痒痒也想搞一个！但是一张张手动 Photoshop 也太费劲了，咱可是玩电脑的，必须用键盘解决问题！So，我决定开发一个神器：PoToPi，一键将你的照片变成像素画。其中还有一个原因，我以及何某（何秋阳）在学习单片机的时候都遇到一个问题，就是在配置点阵型LCD屏幕的时候，需要实现一些特殊的图像效果，而现有的驱动库没有提供相应的接口，需要自己编写图像处理算法，逐个像素地修改像素值，才能实现特定的效果，这样就很烦，所以，这个PoToPi在低分辨率的单片机屏幕上显示图像，开发像素风格的复古游戏，在 LED 点阵屏上显示图像或动画等方面都可以使用还能直接生成单片机可用的代码！安排！

PS：我来解释下PoToPi这个名字的意义吧，名字拆成三部分，Po/To/Pi，为什么酱紫起名字腻，Po我是想着photo（图片），To就是字面的介词to，Pi呢，我是在有道搜的，像素Pixel,和photo一样取前面俩字母（我英语不好招笑了\手动流泪）

技术选型：前端老三样 + 后端好帮手

  • HTML: 搭建用户界面，提供图片上传、配置选项和预览区域。
  • CSS: 美化界面，让工具看起来更专业、更有复古范儿。
  • JavaScript: 实现核心功能，包括图片读取、像素化处理、数据格式转换和输出。

核心功能：让图片“黑头化”（我感觉黑的像素点像黑头）

  • 图片上传： 允许用户上传图片 (支持拖拽上传)，并限制图片大小 (防止服务器被撑爆)。
  • 分辨率调整： 允许用户自定义像素画的分辨率 (such as32x32, 64x64)，颗粒大小随心所欲。
  • 颜色模式选择： 支持多种颜色模式 (RGB888, RGB565, 灰度)，满足不同设备的需求。
  • 像素化处理： 将图片转换为像素点阵数据，核心就是对原始图片进行缩放，然后读取像素值。
  • 格式化输出： 将像素点阵数据输出为不同的格式 (可以生成C 数组、二进制文件)，方便在各种平台使用。
  • 预览效果： 在 Web 界面上预览转换后的像素画效果，所见即所得。

代码实现 (前方高能！小耳朵又要竖起来听了🤓)

1. HTML 骨架搭建:

<!DOCTYPE html>
<html>
<head>
  <title>Pic2Pixel</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  <div class="container">
    <h1>Pic2Pixel <i class="fas fa-image"></i> - 图片转像素点阵</h1> <!-- 标题 -->

    <div class="upload-section" id="drop-area"> <!-- 上传区域 -->
      <input type="file" id="imageUpload" accept="image/*" hidden> <!-- 隐藏的文件选择框 -->
      <label for="imageUpload" class="upload-button"> <!-- 上传按钮 -->
        <i class="fas fa-upload"></i> 选择图片 或 拖拽到这里
      </label>
      <p id="file-name"></p> <!-- 显示文件名 -->
    </div>

    <div class="error" id="error-message"></div> <!-- 显示错误信息 -->

    <div class="config-section"> <!-- 配置选项 -->
      <label for="resolution">分辨率:</label>
      <input type="number" id="resolution" value="32" min="8" max="128"> <!-- 分辨率输入框 -->
      <label for="colorMode">颜色模式:</label>
      <select id="colorMode"> <!-- 颜色模式选择 -->
        <option value="rgb888">RGB888</option>
        <option value="rgb565">RGB565</option>
        <option value="grayscale">灰度</option>
      </select>
    </div>

    <div class="preview-section"> <!-- 预览区域 -->
      <div class="preview-item"> <!-- 原始图片 -->
        <h2>原始图片</h2>
        <canvas id="originalCanvas"></canvas> <!-- 画布 -->
      </div>
      <div class="preview-item"> <!-- 像素化预览 -->
        <h2>像素化预览</h2>
        <canvas id="pixelCanvas"></canvas> <!-- 画布 -->
      </div>
    </div>

    <div class="options-section"> <!-- 输出选项 -->
      <label for="outputFormat">输出格式:</label>
      <select id="outputFormat"> <!-- 输出格式选择 -->
        <option value="cArray">C 数组</option>
        <option value="binary">二进制文件</option>
      </select>
      <button id="convertButton">转换</button> <!-- 转换按钮 -->
      <a id="downloadLink" href="#" download="pixel_data.txt" style="display:none;">下载</a> <!-- 下载链接 (默认隐藏) -->
    </div>

    <div id="output" class="output-section"> <!-- 输出区域 -->
      <h2>C 数组:</h2>
      <pre id="cArrayOutput"></pre> <!-- 显示 C 数组代码 -->
    </div>
  </div>
  <script src="script.js"></script> <!-- 引入 JavaScript 文件 -->
</body>
</html>

2. JavaScript 核心逻辑:

const imageUpload = document.getElementById("imageUpload"); // 找到上传图片的按钮
const originalCanvas = document.getElementById("originalCanvas"); // 原始图片画布
const pixelCanvas = document.getElementById("pixelCanvas"); // 像素化画布
const cArrayOutput = document.getElementById("cArrayOutput"); // C 数组输出框
const outputFormatSelect = document.getElementById("outputFormat"); // 输出格式选择
const convertButton = document.getElementById("convertButton"); // 转换按钮
const downloadLink = document.getElementById("downloadLink"); // 下载链接
const errorMessage = document.getElementById("error-message"); // 错误信息框
const fileNameDisplay = document.getElementById("file-name"); // 文件名显示
const resolutionInput = document.getElementById("resolution"); // 分辨率输入
const colorModeSelect = document.getElementById("colorMode"); // 颜色模式选择

const originalCtx = originalCanvas.getContext("2d"); // 原始画布画笔
const pixelCtx = pixelCanvas.getContext("2d"); // 像素化画布画笔

let uploadedImage = null; // 存用户上传的图片

// 监听各种事件
imageUpload.addEventListener("change", handleImageUpload); // 上传图片
convertButton.addEventListener("click", convertImage); // 点击转换
resolutionInput.addEventListener("change", updatePreview); // 改分辨率
colorModeSelect.addEventListener("change", updatePreview); // 改颜色模式

function handleImageUpload(event) {
  // 处理图片上传
  const file = event.target.files[0]; // 拿到文件
  if (!file) return; // 没选文件就结束

  fileNameDisplay.textContent = file.name; // 显示文件名
  if (file.size > 1024 * 1024) {
    // 大于 1MB 就报错
    displayError("图片太大，不能超过 1MB!");
    return;
  }
  errorMessage.textContent = ""; // 清空之前的错误

  const reader = new FileReader(); // 文件阅读器
  reader.onload = (e) => {
    // 读完文件后
    uploadedImage = new Image(); // 创建图片对象
    uploadedImage.onload = () => {
      // 图片加载完后
      originalCanvas.width = uploadedImage.width; // 原始画布大小
      originalCanvas.height = uploadedImage.height;
      originalCtx.drawImage(uploadedImage, 0, 0); // 画上去

      updatePreview(); // 更新像素化预览
    };
    uploadedImage.src = e.target.result; // 设置图片源，开始加载
  };
  reader.readAsDataURL(file); // 开始读取文件
}

function updatePreview() {
  // 更新像素化预览
  if (!uploadedImage) return; // 没上传图片就结束

  const resolution = parseInt(resolutionInput.value); // 拿到分辨率

  pixelCanvas.width = resolution; // 设置画布大小
  pixelCanvas.height = resolution;

  pixelCtx.drawImage(uploadedImage, 0, 0, resolution, resolution); // 画上去，并缩放
}

function convertImage() {
  // 转换图片并生成代码/文件
  if (!uploadedImage) {
    // 没上传图片就报错
    displayError("先上传图片!");
    return;
  }

  const resolution = parseInt(resolutionInput.value); // 拿到分辨率
  const colorMode = colorModeSelect.value; // 拿到颜色模式

  pixelCanvas.width = resolution; // 设置画布大小
  pixelCanvas.height = resolution;

  pixelCtx.drawImage(uploadedImage, 0, 0, resolution, resolution); // 画上去，并缩放
  const imageData = pixelCtx.getImageData(0, 0, resolution, resolution); // 拿到像素数据
  const pixels = imageData.data; // 像素数据

  const outputFormat = outputFormatSelect.value; // 拿到输出格式
  let outputData = ""; // 输出数据

  if (outputFormat === "cArray") {
    // 生成 C 数组
    outputData = generateCArray(pixels, resolution, resolution, colorMode); // 生成
    cArrayOutput.textContent = outputData; // 显示
    downloadLink.style.display = "none"; // 隐藏下载链接
  } else if (outputFormat === "binary") {
    // 生成二进制文件
    outputData = generateBinaryData(pixels, resolution, resolution, colorMode); // 生成
    const blob = new Blob([outputData], {
      type: "application/octet-stream",
    }); // 创建 Blob 对象
    const url = URL.createObjectURL(blob); // 创建 URL
    downloadLink.href = url; // 设置下载链接
    downloadLink.download =
      fileNameDisplay.textContent.split(".")[0] +
      "_" +
      resolution +
      "_" +
      colorMode +
      ".bin"; // 文件名
    downloadLink.style.display = "inline"; // 显示下载链接
    cArrayOutput.textContent = ""; // 清空 C 数组框
  }
}

function generateCArray(pixels, width, height, colorMode) {
  // 生成 C 数组代码
  let arrayString =
    "const unsigned char pixelData[" + width * height * 3 + "] = {\n"; // 数组声明
  for (let y = 0; y < height; y++) {
    // 循环每一行
    arrayString += "    "; // 缩进
    for (let x = 0; x < width; x++) {
      // 循环每一列
      const index = (y * width + x) * 4; // 像素索引
      let r = pixels[index]; // 红
      let g = pixels[index + 1]; // 绿
      let b = pixels[index + 2]; // 蓝

      if (colorMode === "grayscale") {
        // 灰度模式
        const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b); // 算灰度
        r = g = b = gray; // 赋值
      }
      arrayString += r + ", " + g + ", " + b + ", "; // 加到数组
    }
    arrayString += "\n"; // 换行
  }
  arrayString += "};\n"; // 数组结束
  return arrayString; // 返回代码
}

function generateBinaryData(pixels, width, height, colorMode) {
  // 生成二进制数据
  const buffer = new Uint8Array(
    width * height * 3
  ); // 假设 RGB888，创建 Uint8Array
  let bufferIndex = 0; // 索引

  for (let y = 0; y < height; y++) {
    // 循环每一行
    for (let x = 0; x < width; x++) {
      // 循环每一列
      const index = (y * width + x) * 4; // 像素索引
      let r = pixels[index]; // 红
      let g = pixels[index + 1]; // 绿
      let b = pixels[index + 2]; // 蓝

      if (colorMode === "grayscale") {
        // 灰度模式
        const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b); // 算灰度
        r = g = b = gray; // 赋值
      }

      buffer[bufferIndex++] = r; // 加到 buffer
      buffer[bufferIndex++] = g;
      buffer[bufferIndex++] = b;
    }
  }
  return buffer; // 返回数据
}

function displayError(message) {
  // 显示错误
  errorMessage.textContent = message; // 显示错误信息
}

3. CSS 美化界面 (style.css):

body {
  font-family: 'Arial', sans-serif; /* 字体 */
  background-color: #f4f4f4; /* 背景颜色 */
  color: #333; /* 字体颜色 */
  line-height: 1.6; /* 行高 */
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 最小高度 */
}

.container {
  width: 80%; /* 容器宽度 */
  max-width: 960px; /* 最大宽度 */
  margin: 20px auto; /* 上下外边距 */
  background-color: #fff; /* 背景颜色 */
  padding: 30px; /* 内边距 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影 */
}

h1 {
  text-align: center; /* 居中 */
  color: #333; /* 字体颜色 */
  margin-bottom: 20px; /* 下外边距 */
}

/* Upload Section */
.upload-section {
  margin-bottom: 20px; /* 下外边距 */
  text-align: center; /* 居中 */
}

.upload-button {
  padding: 10px 20px; /* 内边距 */
  background-color: #5cb85c; /* 背景颜色 */
  color: white; /* 字体颜色 */
  border: none; /* 无边框 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标样式 */
  transition: background-color 0.3s; /* 过渡效果 */
  display: inline-block; /* 行内块元素 */
}

.upload-button:hover {
  background-color: #449d44; /* 鼠标悬停时的背景颜色 */
}

input[type="file"] {
  display: none; /* 隐藏文件选择框 */
}

/* Drop Area */
#drop-area {
  border: 2px dashed #ccc; /* 虚线边框 */
  border-radius: 5px; /* 圆角 */
  padding: 20px; /* 内边距 */
  text-align: center; /* 居中 */
  cursor: pointer; /* 鼠标样式 */
}

#drop-area.highlight {
  border-color: #5cb85c; /* 高亮时的边框颜色 */
  background-color: #f0fdf0; /* 高亮时的背景颜色 */
}

/* File name display */
#file-name {
  margin-top: 10px; /* 上外边距 */
  font-style: italic; /* 斜体 */
  color: #777; /* 字体颜色 */
}

/* Preview Section */
.preview-section {
  display: flex; /* Flex 布局 */
  justify-content: space-around; /* 水平对齐 */
  margin-bottom: 20px; /* 下外边距 */
}

.preview-item {
  flex: 1; /* 占据剩余空间 */
  padding: 10px; /* 内边距 */
  border: 1px solid #ddd; /* 边框 */
  border-radius: 5px; /* 圆角 */
  text-align: center; /* 居中 */
}

.preview-item h2 {
  font-size: 1.2em; /* 字体大小 */
  margin-bottom: 10px; /* 下外边距 */
}

canvas {
  max-width: 100%; /* 最大宽度 */
  height: auto; /* 高度自适应 */
  border: 1px solid #eee; /* 边框 */
}

/* Options Section */
.options-section {
  display: flex; /* Flex 布局 */
  justify-content: center; /* 水平对齐 */
  align-items: center; /* 垂直对齐 */
  margin-bottom: 20px; /* 下外边距 */
}

.options-section label {
  margin-right: 10px; /* 右外边距 */
  font-weight: bold; /* 字体加粗 */
}

.options-section select,
.options-section input[type="number"] {
  padding: 8px 12px; /* 内边距 */
  border-radius: 5px; /* 圆角 */
  border: 1px solid #ccc; /* 边框 */
  margin-right: 10px; /* 右外边距 */
}

.options-section button,
#downloadLink {
  padding: 8px 12px; /* 内边距 */
  border-radius: 5px; /* 圆角 */
  border: 1px solid #ccc; /* 边框 */
  background-color: #007bff; /* 背景颜色 */
  color: white; /* 字体颜色 */
  border: none; /* 无边框 */
  cursor: pointer; /* 鼠标样式 */
  transition: background-color 0.3s; /* 过渡效果 */
  margin-left: 10px; /* 左外边距 */
  text-decoration: none; /* 无下划线 */
}

.options-section button:hover,
#downloadLink:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}

/* Configuration Section */
.config-section {
  display: flex; /* Flex 布局 */
  justify-content: center; /* 水平对齐 */
  align-items: center; /* 垂直对齐 */
  margin-bottom: 20px; /* 下外边距 */
}

.config-section label {
  margin-right: 10px; /* 右外边距 */
  font-weight: bold; /* 字体加粗 */
}

.config-section input[type="number"],
.config-section select {
  padding: 8px 12px; /* 内边距 */
  border-radius: 5px; /* 圆角 */
  border: 1px solid #ccc; /* 边框 */
  margin-right: 10px; /* 右外边距 */
}

/* Output Section */
.output-section {
  background-color: #f9f9f9; /* 背景颜色 */
  border: 1px solid #ddd; /* 边框 */
  border-radius: 5px; /* 圆角 */
  padding: 20px; /* 内边距 */
}

.output-section h2 {
  font-size: 1.2em; /* 字体大小 */
  margin-bottom: 10px; /* 下外边距 */
}

pre {
  white-space: pre-wrap; /* 保留空格和换行 */
  font-family: monospace; /* 等宽字体 */
  background-color: #eee; /* 背景颜色 */
  padding: 10px; /* 内边距 */
  border: 1px solid #ccc; /* 边框 */
  overflow-x: auto; /* 水平滚动条 */
}

/* Error Message */
.error {
  color: #d32f2f; /* 字体颜色 */
  margin-bottom: 10px; /* 下外边距 */
  text-align: center; /* 居中 */
}

运行效果：

  1. 上传图片，自动显示在原始图片预览区域。
  2. 调整分辨率和颜色模式，像素化预览区域实时更新。
  3. 选择输出格式 (C 数组或二进制文件)，点击“转换”按钮。
  4. C 数组代码直接显示在页面上，二进制文件则直接下载。

后端核心逻辑：

  • 使用 express 框架搭建 Web 服务器。
  • 使用 multer 当中间人处理图片上传。
  • 使用 sharp 或 jimp 等图片处理库进行图片缩放和像素数据提取。
  • 将处理后的像素数据返回给前端。

BB！

暂无评论

发送评论 编辑评论






















|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!



上一篇
下一篇