像素圖生成小程序開發全解析：從圖片上傳到Excel圖紙

前言

在數字化創作和工藝設計領域，像素圖生成工具具有廣泛的應用價值，無論是十字繡設計、LED燈陣布置還是復古游戲美術創作。本文將詳細解析一個功能完整的像素圖生成小程序的開發過程，該工具允許用戶上傳圖片，并通過多種參數定制生成像素化效果。

在這里插入圖片描述

項目概述

核心功能

這款小程序的核心功能是讓用戶上傳圖片，通過后臺處理生成像素圖，并提供以下可調參數：

顆粒度（像素大小）控制
多種色差算法選擇
索引和坐標系生成選項
自定義調色板支持
Excel格式輸出功能

技術架構

前端：微信小程序框架 + JavaScript
后端：Node.js + Express/Koa框架
圖像處理：Sharp庫 + 自定義算法
Excel生成：SheetJS/xlsx庫
部署環境：云服務器或Serverless架構

前端設計與實現

用戶界面設計

前端界面需要簡潔直觀，主要包含以下區域：

<!-- 上傳區域 -->
<view class="upload-area" bindtap="selectImage"><image src="{{tempImagePath}}" mode="aspectFit"></image><text>{{tempImagePath ? '重新選擇' : '點擊選擇圖片'}}</text>
</view><!-- 參數控制區域 -->
<view class="control-panel"><slider value="{{pixelSize}}" min="1" max="20" bindchange="onPixelSizeChange"/><picker range="{{algorithmList}}" value="{{algorithmIndex}}" bindchange="onAlgorithmChange"><view>當前算法: {{algorithmList[algorithmIndex]}}</view></picker><switch checked="{{showIndex}}" bindchange="onShowIndexChange"/><!-- 更多參數控制... -->
</view><!-- 生成按鈕 -->
<button type="primary" bindtap="generatePixelArt">生成像素圖</button>

前端核心邏輯

// 頁面邏輯
Page({data: {tempImagePath: '',pixelSize: 5,algorithmIndex: 0,algorithmList: ['最近鄰', '雙線性插值', '中值切割'],showIndex: false,showCoordinate: false,palette: [],exportExcel: false},// 選擇圖片selectImage: function() {const that = this;wx.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album', 'camera'],success: function(res) {that.setData({tempImagePath: res.tempFilePaths[0]});}});},// 生成像素圖generatePixelArt: function() {const that = this;wx.showLoading({ title: '生成中...' });// 上傳圖片到后端wx.uploadFile({url: 'https://your-domain.com/api/generate-pixel-art',filePath: that.data.tempImagePath,name: 'image',formData: {pixelSize: that.data.pixelSize,algorithm: that.data.algorithmList[that.data.algorithmIndex],showIndex: that.data.showIndex,showCoordinate: that.data.showCoordinate,palette: JSON.stringify(that.data.palette),exportExcel: that.data.exportExcel},success: function(res) {const data = JSON.parse(res.data);// 處理返回結果that.handleResult(data);},complete: function() {wx.hideLoading();}});},// 處理生成結果handleResult: function(data) {if (data.success) {if (data.type === 'image') {// 顯示生成的像素圖this.setData({ resultImage: data.url });} else if (data.type === 'excel') {// 下載Excel文件wx.downloadFile({url: data.url,success: function(res) {wx.openDocument({filePath: res.tempFilePath,fileType: 'xlsx'});}});}} else {wx.showToast({ title: '生成失敗', icon: 'none' });}}
});

后端實現細節

服務器架構

const express = require('express');
const multer = require('multer');
const sharp = require('sharp');
const xlsx = require('xlsx');
const app = express();// 配置文件上傳
const upload = multer({ dest: 'uploads/' });// 處理像素圖生成請求
app.post('/api/generate-pixel-art', upload.single('image'), async (req, res) => {try {const { pixelSize, algorithm, showIndex, showCoordinate, palette, exportExcel } = req.body;// 解析參數const options = {pixelSize: parseInt(pixelSize),algorithm: algorithm,showIndex: showIndex === 'true',showCoordinate: showCoordinate === 'true',palette: palette ? JSON.parse(palette) : null,exportExcel: exportExcel === 'true'};// 處理圖片const result = await processImage(req.file.path, options);// 返回結果res.json({success: true,type: options.exportExcel ? 'excel' : 'image',url: result.url});} catch (error) {console.error('處理錯誤:', error);res.json({ success: false, message: error.message });}
});

核心圖像處理算法

async function processImage(imagePath, options) {// 讀取圖片元數據const metadata = await sharp(imagePath).metadata();// 計算縮小后的尺寸const scaledWidth = Math.floor(metadata.width / options.pixelSize);const scaledHeight = Math.floor(metadata.height / options.pixelSize);// 調整圖片大小 - 使用選擇的算法let resizedImage = sharp(imagePath).resize({width: scaledWidth,height: scaledHeight,kernel: getSharpKernel(options.algorithm)});// 應用調色板（如果提供了）if (options.palette && options.palette.length > 0) {resizedImage = resizedImage.png({palette: true,colors: options.palette.length});}// 放大回近似原始尺寸（保持像素化效果）const outputBuffer = await resizedImage.resize({width: scaledWidth * options.pixelSize,height: scaledHeight * options.pixelSize,kernel: sharp.kernel.nearest // 使用最近鄰算法保持像素感}).toBuffer();// 添加索引和坐標系（如果需要）let finalBuffer = outputBuffer;if (options.showIndex || options.showCoordinate) {finalBuffer = await addAnnotations(outputBuffer, scaledWidth, scaledHeight, options);}// 保存或返回結果if (options.exportExcel) {return generateExcel(outputBuffer, scaledWidth, scaledHeight, options);} else {return saveImage(finalBuffer);}
}// 根據算法名稱獲取Sharp對應的內核
function getSharpKernel(algorithm) {const kernels = {'最近鄰': sharp.kernel.nearest,'雙線性插值': sharp.kernel.linear,'中值切割': sharp.kernel.cubic};return kernels[algorithm] || sharp.kernel.nearest;
}

添加索引和坐標系

async function addAnnotations(imageBuffer, width, height, options) {// 使用Canvas進行標注添加const { createCanvas, loadImage } = require('canvas');const canvas = createCanvas(width * options.pixelSize, height * options.pixelSize);const ctx = canvas.getContext('2d');// 繪制像素圖const image = await loadImage(imageBuffer);ctx.drawImage(image, 0, 0);// 添加坐標系if (options.showCoordinate) {ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';ctx.lineWidth = 1;// 繪制網格for (let x = 0; x <= width; x++) {ctx.beginPath();ctx.moveTo(x * options.pixelSize, 0);ctx.lineTo(x * options.pixelSize, height * options.pixelSize);ctx.stroke();}for (let y = 0; y <= height; y++) {ctx.beginPath();ctx.moveTo(0, y * options.pixelSize);ctx.lineTo(width * options.pixelSize, y * options.pixelSize);ctx.stroke();}}// 添加索引if (options.showIndex) {ctx.font = `${Math.max(10, options.pixelSize / 2)}px Arial`;ctx.fillStyle = 'black';ctx.textAlign = 'center';ctx.textBaseline = 'middle';for (let y = 0; y < height; y++) {for (let x = 0; x < width; x++) {const centerX = x * options.pixelSize + options.pixelSize / 2;const centerY = y * options.pixelSize + options.pixelSize / 2;ctx.fillText(`${x},${y}`, centerX, centerY);}}}return canvas.toBuffer();
}

Excel生成功能

function generateExcel(imageBuffer, width, height, options) {// 解析圖像數據獲取顏色信息const { createCanvas, loadImage } = require('canvas');const canvas = createCanvas(width, height);const ctx = canvas.getContext('2d');const image = loadImage(imageBuffer);ctx.drawImage(image, 0, 0, width, height);const imageData = ctx.getImageData(0, 0, width, height).data;// 創建工作簿const workbook = xlsx.utils.book_new();// 創建顏色數據工作表const colorData = [];for (let y = 0; y < height; y++) {const row = [];for (let x = 0; x < width; x++) {const idx = (y * width + x) * 4;const r = imageData[idx];const g = imageData[idx + 1];const b = imageData[idx + 2];// 使用RGB格式表示顏色row.push(`RGB(${r},${g},${b})`);}colorData.push(row);}const colorSheet = xlsx.utils.aoa_to_sheet(colorData);xlsx.utils.book_append_sheet(workbook, colorSheet, '顏色數據');// 創建指導說明工作表const guideData = [['像素圖制作指南'],[''],['尺寸', `${width} x ${height} 像素`],['顆粒度', options.pixelSize],['色差算法', options.algorithm],[''],['使用說明：'],['1. 此文檔包含像素圖的顏色數據'],['2. 每個單元格代表一個像素點的RGB顏色值'],['3. 可根據此數據手工制作像素畫或十字繡']];const guideSheet = xlsx.utils.aoa_to_sheet(guideData);xlsx.utils.book_append_sheet(workbook, guideSheet, '制作指南');// 保存Excel文件const fileName = `pixel-art-${Date.now()}.xlsx`;const filePath = `./exports/${fileName}`;xlsx.writeFile(workbook, filePath);return { url: `/downloads/${fileName}` };
}