在开发中,我们经常会用到雪碧图,有时候 UI 可能给了很多小图,没有给到雪碧图,为了减少请求,我们会选择自己去在线生成或 ps,但是这样太繁琐了,能不能我们用一个函数实现呢?网上很多方案是借助 webpack 实现这个功能的,但是我想能不能简单点,于是就有了这个 demo,目前该 demo 可以合成雪碧图导出,但是没有导出对应的坐标 json 文件,后期再完善,先这样。

一、主要思路

1、要合成雪碧图的前提是拿到对应图片的路径,网页要拿图片的路径无非就是通过 input file 上传的时候拿本地路径或者更加简单粗暴地自己写;

2、要合成雪碧图,需要有个工具去把他们拼凑在一起,网页怎么把图片拼在一起呢?当然是用 canvas 画啦;

3、已经可以组合图片了,怎么导出呢?客户端的 js 没有操作文件系统的高端属性啊,我选择的是用一个保存文件的第三方库 file-saver,这是一个客户端 js 保存文件的神器。

二、实现

demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { saveAs } from "file-saver";

function newSprite({ canvasId, images, width, height }) {
const canvas = document.getElementById(canvasId);
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
const initX = 0;
images.forEach((ele, index) => {
const ctx = canvas.getContext("2d");
ctx.drawImage(ele, initX + 50 * index, 0);
});
canvas.toBlob(blob => {
saveAs(blob, "sprite.png");
});
}

预览:

Demos => canvas 绘图 => 合成雪碧图

三、扩展

如果觉得这样还不够好用的话,可以学习 smithSprite,把对应图片的 css 坐标样式也导出来