在前端开发中，精灵图（Sprite）是一种常见的优化技术，通过将多个小图标合并为一张大图片，减少HTTP请求，从而提升页面加载速度。然而，手动处理精灵图往往耗时且容易出错。今天，我们将通过Node.js和pngjs库，实现自动提取精灵图并生成对应的CSS代码，大大提高开发效率。
一、什么是精灵图？
精灵图是一种将多个小图片合并为一张大图片的技术。通过CSS的background-image和background-position属性，可以在网页中显示大图片的某一部分，从而实现多个小图标的显示。精灵图的优点是可以减少HTTP请求次数，优化网页性能。
二、技术栈介绍
- Node.js：一个基于Chrome V8引擎的JavaScript运行环境，适用于服务器端开发。
- PNG.js：一个用于处理PNG图片的Node.js库，支持读取、解析和修改PNG图片。
三、代码实现
以下是完整的代码实现，它将读取一个PNG图片文件，提取其中的精灵图，并生成对应的CSS文件和分割后的图片。
1. 安装依赖
在开始之前，确保你已经安装了pngjs库。可以通过以下命令安装：
npm install pngjs2. 完整代码
var fs = require('fs');
var PNG = require('pngjs').PNG;
// 获取命令行参数中的PNG文件路径
var pngFile = process.argv[2];
var outDir = pngFile.replace(".png", "");
// 读取PNG文件并解析
fs.createReadStream(pngFile)
.pipe(new PNG({ filterType: 4 }))
.on('parsed', function () {
// 复制图片数据
var tempData = new Buffer(4 * this.width * this.height);
this.data.copy(tempData);
// 创建输出目录
if (!fs.existsSync('export')) {
fs.mkdirSync('export');
}
if (!fs.existsSync('export/' + outDir)) {
fs.mkdirSync('export/' + outDir);
}
// 获取精灵图数组
var spritesArray = getSprites(tempData, this.height, this.width);
// 生成CSS代码
var css = getCss(spritesArray, pngFile);
fs.writeFile(outDir + '.css', css, function (err) {
if (err) throw err;
console.log('CSS文件已保存!');
});
// 保存每个精灵图为单独的PNG文件
for (var i = 0; i < spritesArray.length; i++) {
var rect = spritesArray[i];
var newData = {
data: null,
height: (rect.rb.y - rect.rt.y),
width: (rect.rt.x - rect.lt.x)
};
var newPng = new PNG({
filterType: 4,
width: newData.width,
height: newData.height
});
// 截取精灵图区域
this.bitblt(newPng, rect.lt.x, rect.lt.y, newData.width, newData.height, 0, 0);
// 保存为PNG文件
var dst = fs.createWriteStream('export/' + outDir + '/' + outDir + '' + i + '.png');
newPng.pack().pipe(dst);
}
});
// 生成CSS代码
function getCss(spritesArray, pngname) {
var css = `.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(${pngname});}`;
for (var i = 0; i < spritesArray.length; i++) {
var rect = spritesArray[i];
css += getSpriteCss('sprite' + i, rect);
}
return css;
}
// 生成单个精灵图的CSS代码
function getSpriteCss(spritename, rect) {
return `.${spritename} {width:${rect.rt.x - rect.lt.x}px; height:${rect.rb.y - rect.rt.y}px; background-position: ${0 - rect.lt.x}px ${0 - rect.lt.y}px;}`;
}
// 提取精灵图数组
function getSprites(data, height, width) {
var spritesArray = [];
var contourVector = marchingSquares(data, height, width);
while (contourVector.length > 3) {
var rect = getRect(contourVector);
if ((rect.rt.x - rect.lt.x > 3) && (rect.lb.y - rect.lt.y > 3)) {
spritesArray.push(rect);
}
// 清空已提取的区域
for (var y = rect.rt.y; y < rect.rb.y; y++) {
for (var x = rect.lb.x; x < rect.rb.x; x++) {
var idx = (width * y + x) << 2;
data[idx] = 0;
data[idx + 1] = 0;
data[idx + 2] = 0;
data[idx + 3] = 0;
}
}
contourVector = marchingSquares(data, height, width);
}
return spritesArray;
}
// 获取矩形边界
function getRect(squareArray) {
var rectXY = {};
rectXY.maxX = squareArray[0].x;
rectXY.minX = squareArray[0].x;
rectXY.maxY = squareArray[0].y;
rectXY.minY = squareArray[0].y;
for (var i = 0; i < squareArray.length; i++) {
var p = squareArray[i];
rectXY.maxX = p.x > rectXY.maxX ? p.x : rectXY.maxX;
rectXY.maxY = p.y > rectXY.maxY ? p.y : rectXY.maxY;
rectXY.minX = p.x < rectXY.minX ? p.x : rectXY.minX;
rectXY.minY = p.y < rectXY.minY ? p.y : rectXY.minY;
}
return {
lt: { x: rectXY.minX, y: rectXY.minY },
lb: { x: rectXY.minX, y: rectXY.maxY },
rt: { x: rectXY.maxX, y: rectXY.minY },
rb: { x: rectXY.maxX, y: rectXY.maxY }
};
}
// Marching Squares算法实现
function marchingSquares(data, height, width) {
var contourVector = [];
var startPoint = getStartingPixel(data, height, width);
if (startPoint != null && startPoint.x >= 0) {
var pX = startPoint.x;
var pY = startPoint.y;
var stepX = 0;
var stepY = 0;
var prevX = 0;
var prevY = 0;
var closedLoop = false;
while (!closedLoop) {
var squareValue = getSquareValue(data, pX, pY, width);
switch (squareValue) {
case 1:
case 5:
case 13:
stepX = 0;
stepY = -1;
break;
case 8:
case 10:
case 11:
stepX = 0;
stepY = 1;
break;
case 4:
case 12:
case 14:
stepX = -1;
stepY = 0;
break;
case 2:
case 3:
case 7:
stepX = 1;
stepY = 0;
break;
case 6:
if (prevX == 0 && prevY == -1) {
stepX = -1;
stepY = 0;
} else {
stepX = 1;
stepY = 0;
}
break;
case 9:
if (prevX == 1 && prevY == 0) {
stepX = 0;
stepY = -1;
} else {
stepX = 0;
stepY = 1;
}
break;
}
pX += stepX;
pY += stepY;
contourVector.push(new Point(pX, pY));
prevX = stepX;
prevY = stepY;
if (pX == startPoint.x && pY == startPoint.y) {
closedLoop = true;
}
}
}
return contourVector;
}
// 获取2x2像素网格的值
function getSquareValue(data, pX, pY, width) {
var squareValue = 0;
if (!isAlpha(data, pX - 1, pY - 1, width)) {
squareValue += 1;
}
if (!isAlpha(data, pX, pY - 1, width)) {
squareValue += 2;
}
if (!isAlpha(data, pX - 1, pY, width)) {
squareValue += 4;
}
if (!isAlpha(data, pX, pY, width)) {
squareValue += 8;
}
return squareValue;
}
// 找到第一个非透明像素作为起始点
function getStartingPixel(data, height, width) {
var offsetPoint = new Point(-1, -1);
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var idx = (width * y + x) << 2;
var alpha = data[idx + 3];
if (alpha > 0) {
offsetPoint.x = x;
offsetPoint.y = y;
return offsetPoint;
}
}
}
return offsetPoint;
}
// 检查像素是否透明
function isAlpha(data, x, y, width) {
if (x < 0 || y < 0) {
return true;
}
var idx = (width * y + x) << 2;
var alpha = data[idx + 3];
return alpha == 0;
}
// 定义点类
var Point = function (_x, _y) {
this.x = _x;
this.y = _y;
};3. 运行代码
将上述代码保存为sprite.js，然后通过以下命令运行：
node sprite.js your-image.png运行完成后，你将在export目录中找到提取的精灵图和对应的CSS文件。
四、代码解析
- PNG.js：用于读取和解析PNG图片，支持像素级操作。
- Marching Squares算法：用于提取图片中的轮廓，从而确定每个精灵图的边界。
- CSS生成：根据提取的精灵图边界，生成对应的CSS代码，方便在网页中使用。
- 文件输出：将提取的精灵图保存为单独的PNG文件，并生成一个CSS文件用于样式定义。