前言
前端开发中，优化图片是一个很重要的环节。在多张图片的合并上，sprity 是一个广受好评的工具。但是在一些情况下，sprity 的可定制性不够，难以满足开发需求。本文介绍一种依赖于 Jimp 的 sprity-jimp，它可以帮助我们在灵活控制图片合并的基础上，实现更加高效的图片合并。
简介
sprity-jimp 是一个基于Jimp 图像处理库的 sprity 扩展，它使用与 sprity 相同的 API，并且具有可定制的优势。我们可以根据需求自由控制图片合成的顺序、尺寸和每行的图片数量，同时还可以通过 Jimp 库提供的强大图像处理功能对图像进行处理。
安装
sprity-jimp 需要依赖于 Node.js 和 npm，请先确保已正确安装。
在 Node.js 项目中，使用如下命令安装 sprity-jimp:
npm install sprity-jimp --save-dev
可以使用 -g 参数全局安装到系统中：
npm install sprity-jimp -g
如何使用
将多张图片合并成一张 sprite 图片，我们需要 sprity-jimp 和一个包含图片资源的目录。
在需要使用 sprite 图片的 HTML 文档中引入 sprite 图片以及对应的 css 文件就可以了，css 代码中使用相应的 background-image，background-size，background-position 等属性，就可以在页面中显示出 sprite 图片切片后的单张图片。
假设我们有这样一个项目结构：
-- -------------------- ---- ------- - --- ----- - --- ------- - --- ------- - --- ----- - --- ----- - --- ----- - --- ----- - --- ----- --- --- - --- -------- --- ----------
这里有一个 animals 目录，用于存储需要生成 sprite 图片的单张图片资源。
示例
我们现在开始创建 sprite 图片。在控制台中键入以下命令：
sprity create build/sprites/animals/*.{png,jpg} --split --processor sprity-jimp --prefix sprite--split 参数告诉 sprity 按每行五张图片切割，这样就会生成一张包含所有图片的 sprite.png 图片和一个对应的 main.css 文件。后缀为 -16.png 的文件是自动生成的一份大小为 16 像素的缩略图。
-- -------------------- ---- ------- - --- ----- - --- ------- - --- ------- - - --- ----- - - --- ----- - - --- ----- - - --- ----- - - --- ----- - --- -------- - --- ------------- - --- ---------- --- --- - --- -------- --- ----------
main.css 的代码如下：
-- -------------------- ---- ------- -------- ------------------- --------- --------- - ----------------- ---------------- - --------- - -------------------- - -- ------ ------ ------- ------ - --------- - -------------------- ------ -- ------ ------ ------- ------- - --------- - -------------------- ------ -- ------ ----- ------- ----- - --------- - -------------------- ------ -- ------ ----- ------- ------ - --------- - -------------------- ------ -- ------ ------ ------- ------ -
注意，这里的背景图片路径是相对于调用 sprity 命令的当前目录决定的，所以如果你是在源码目录下执行该命令的，那么你需要手动修改图片路径才能在 HTML 页面中正确显示 sprite 图片。
结语
通过本文的介绍，我们了解了如何使用 sprity-jimp 制作 sprite 图片，并且利用 Jimp 库提供的强大的图像处理功能，实现了更加定制化的图片切割、拼接等处理操作。在实际的开发过程中，我们可以根据具体需求灵活地配置参数，以达到最佳的性能和效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c5c81e8991b448d9e3e