出处：ATtuing - 博客园 ，https://www.cnblogs.com/ATtuing/p/9273391.html
1.什么是sprite文件
sprite 文件主要是将一堆小图生成一种大图的方法，并且将每张小图的位置信息保存下来，方便读取。在网络请求中会减少请求的数量，mapbox借鉴前端中CSS Sprite方法存储图标信息的。sprite.png文件保存图标，sprite.json保存名称及位置信息，下图图展示的是小图标与大图文件的示例。下面我讲一下两种文件转换。
md_beee6768.png
转为
md_d949a4ef.png
2.实现的功能
再此基础上将小图转大图功能用JavaScript实现。使用Vue、Element实现。
演示地址：https://c317.gitee.io/myb_style/html/creat_MBSprite.html
![]()
md_30d36403.png
3.具体实现方法
md_30d36403.png
1.js获取图片像素
function getXY(canvas, x, y) {
let ctx = canvas.getContext("2d");
// 获取画布上的图像像素矩阵
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let w = imageData.width
let data = imageData.data
let color = []
color[0] = data[(y * w + x) * 4]
color[1] = data[(y * w + x) * 4 + 1]
color[2] = data[(y * w + x) * 4 + 2]
color[3] = data[(y * w + x) * 4 + 3]
return color
}
2.js设置图片像素
//创建canvas
let editMap = document.createElement('canvas');
editMap.width = allwidth;//设置宽度
editMap.height = allheight;//设置高度
let editCxt = editMap.getContext("2d");
//获取ImageData
let imageData = editCxt.getImageData(0, 0, allwidth, allheight);
function setXY(imageData, x, y, color) {
let w = imageData.width
let data = imageData.data
data[(y * w + x) * 4] = color[0]
data[(y * w + x) * 4 + 1] = color[1]
data[(y * w + x) * 4 + 2] = color[2]
data[(y * w + x) * 4 + 3] = color[3]
imageData.data = data;
}
3.小图转大图
将小图标合成一张sprite大图并在sprite.json中记录生成的位置信息，这里最主要的就是图标的摆放规则。
（1）获取所有的图标文件，按照高度从小到大排列
（2）根据大图生成的默认宽度，循环小图片，形成一行一行的图片集合。
（3）根据行数和宽度生成大图的宽度。
（4）循环小图标，在大图中画出小图标，并记录位置信息。
实现成果与核心代码如下：
md_c076a122.png
function creatSprite(paramlist) {
//图片默认宽度为255
let allwidth = 255;
let rowparams = [], paramnowlist = [];
let countnum = 0;
for (let i = 0; i < paramlist.length; i++) {
countnum += paramlist[i].width;
if (countnum > allwidth) {
i = i - 1;
countnum = 0;
rowparams.push(paramnowlist);
paramnowlist = [];
} else {
paramnowlist.push(paramlist[i]);
}
if (i === paramlist.length - 1) {
rowparams.push(paramnowlist);
break;
}
}
//计算应有的高度
let allheight = 0;
rowparams.forEach(item => {
allheight += Math.max.apply(Math, item.map(m => m.height));
})
//计算应有的宽度
allwidth = 0
rowparams[0].forEach(item => {
allwidth += item.width;
})
if (allwidth > 200) allwidth = 255;
console.log(allwidth)
let spritejson = "{\n";
//开始画大图
let editMap = document.createElement('canvas');
editMap.width = allwidth;
editMap.height = allheight;
let editCxt = editMap.getContext("2d");
let editImageData = editCxt.getImageData(0, 0, allwidth, allheight);
//保存起始高度
let heighttemp = 0;
for (let i = 0; i < rowparams.length; i++) {
let tempwidthnum = 0;
for (let j = 0; j < rowparams[i].length; j++) {
let map = rowparams[i][j].canvas;
//循环小图片
for (let x = 0; x < map.width; x++) {
for (let y = 0; y < map.height; y++) {
//获取像素
let color = this.getXY(map, x, y);
this.setXY(editImageData, x + tempwidthnum, y + heighttemp, color);
}
}
spritejson += " \"" + rowparams[i][j].name.replace("-", "/").replace("&", ":") + "\":{\"x\":";
spritejson += tempwidthnum + ",\"y\":" + heighttemp + ",\"width\":" + rowparams[i][j].width;
spritejson += ",\"height\":" + rowparams[i][j].height + ",\"pixelRatio\":1,\"sdf\":false},\n";
//增加宽度
tempwidthnum += rowparams[i][j].width;
}
heighttemp += Math.max.apply(Math, rowparams[i].map(m => m.height));
}
//保存大图
editCxt.putImageData(editImageData, 0, 0);
this.editURL = editMap.toDataURL("image/png");//取得图像的数据URI
spritejson = spritejson.substring(0, spritejson.lastIndexOf(','));
spritejson += "\n}";
this.spritejson = spritejson
}
4.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>生成Mapbox Sprite(精灵图)</title>
<!-- import CSS -->
<link href="https://cdn.bootcss.com/element-ui/2.4.5/theme-chalk/index.css" rel="stylesheet">
<style>
html, body, #app{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
}
.upload, .creat{
border-radius: 4px;
background: #d3dce6;
height: 100%;
}
.but{
height: 100%;
display: flex;
align-items:center;
justify-content:center;
}
</style>
</head>
<body>
<div id="app">
<el-row style="height: 100%">
<el-col class="upload" :span="11">
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
accept="image/*"
:on-preview="handlePreview"
:on-success="handleSuccess"
:on-remove="handleRemove" multiple>
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">只能上传图片格式文件，且不超过500kb</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-col>
<el-col class="but" :span="2">
<el-button type="primary" @click="image">转换</el-button>
</el-col>
<el-col class="creat" :span="11">
<el-row style="height: 45%">
<img :src="editURL" style="border:1px solid #6f6f6f">
</el-row>
<el-row style="height: 10%">
<el-button type="primary" @click="downloadImg">下载图片</el-button>
<el-button type="primary" @click="downloadJSON">下载JSON</el-button>
</el-row>
<el-row style="height: 45%">
<el-input
type="textarea"
:rows="18"
placeholder="JSON内容"
v-model="spritejson"></el-input>
</el-row>
</el-col>
</el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/element-ui/2.4.5/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
disabled: false,
fileList: [],
canvas: [],
paramList: [],//List<Param>
rowparams: [],//List<List<Param>>
editURL:'',
spritejson:''
}
},
mounted() {
},
methods: {
handleRemove(file, fileList) {
this.fileList = fileList;
},
handlePreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleSuccess(response, file, fileList) {
this.fileList = fileList;
},
image() {
let paramlist = [];
if (this.fileList.length === 0) return;
this.fileList.forEach(file => {
let image = new Image();
image.src = file.url;
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
paramlist.push({
name: file.name,
x: 0, y: 0,
width: image.width,
height: image.height,
canvas: canvas
})
})
paramlist.sort(function (a, b) {
return a.height - b.height
})
this.paramList = paramlist;
this.creatSprite(paramlist);
},
creatSprite(paramlist) {
//图片默认宽度为255
let allwidth = 255;
let rowparams = [], paramnowlist = [];
let countnum = 0;
for (let i = 0; i < paramlist.length; i++) {
countnum += paramlist[i].width;
if (countnum > allwidth) {
i = i - 1;
countnum = 0;
rowparams.push(paramnowlist);
paramnowlist = [];
} else {
paramnowlist.push(paramlist[i]);
}
if (i === paramlist.length - 1) {
rowparams.push(paramnowlist);
break;
}
}
//计算应有的高度
let allheight = 0;
rowparams.forEach(item => {
allheight += Math.max.apply(Math, item.map(m => m.height));
})
//计算应有的宽度
allwidth = 0
rowparams[0].forEach(item => {
allwidth += item.width;
})
if (allwidth > 200) allwidth = 255;
console.log(allwidth)
let spritejson = "{\n";
//开始画大图
let editMap = document.createElement('canvas');
editMap.width = allwidth;
editMap.height = allheight;
let editCxt = editMap.getContext("2d");
let editImageData = editCxt.getImageData(0, 0, allwidth, allheight);
//保存起始高度
let heighttemp = 0;
for (let i = 0; i < rowparams.length; i++) {
let tempwidthnum = 0;
for (let j = 0; j < rowparams[i].length; j++) {
let map = rowparams[i][j].canvas;
//循环小图片
for (let x = 0; x < map.width; x++) {
for (let y = 0; y < map.height; y++) {
//获取像素
let color = this.getXY(map, x, y);
this.setXY(editImageData, x + tempwidthnum, y + heighttemp, color);
}
}
spritejson += " \"" + rowparams[i][j].name.replace("-", "/").replace("&", ":") + "\":{\"x\":";
spritejson += tempwidthnum + ",\"y\":" + heighttemp + ",\"width\":" + rowparams[i][j].width;
spritejson += ",\"height\":" + rowparams[i][j].height + ",\"pixelRatio\":1,\"sdf\":false},\n";
//增加宽度
tempwidthnum += rowparams[i][j].width;
}
heighttemp += Math.max.apply(Math, rowparams[i].map(m => m.height));
}
//保存大图
editCxt.putImageData(editImageData, 0, 0);
this.editURL = editMap.toDataURL("image/png");//取得图像的数据URI
spritejson = spritejson.substring(0, spritejson.lastIndexOf(','));
spritejson += "\n}";
this.spritejson = spritejson
},
getXY(canvas, x, y) {
let ctx = canvas.getContext("2d");
// 获取画布上的图像像素矩阵
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let w = imageData.width
let data = imageData.data
let color = []
color[0] = data[(y * w + x) * 4]
color[1] = data[(y * w + x) * 4 + 1]
color[2] = data[(y * w + x) * 4 + 2]
color[3] = data[(y * w + x) * 4 + 3]
return color
},
setXY(imageData, x, y, color) {
let w = imageData.width
let data = imageData.data
data[(y * w + x) * 4] = color[0]
data[(y * w + x) * 4 + 1] = color[1]
data[(y * w + x) * 4 + 2] = color[2]
data[(y * w + x) * 4 + 3] = color[3]
imageData.data = data;
},
downloadImg() {
if (this.editURL === null || this.editURL === '') return;
if (this.spritejson === null || this.spritejson === '') return;
// 将图片的src属性作为URL地址
let a = document.createElement('a')
let event = new MouseEvent('click')
a.download = 'sprite'
a.href = this.editURL
a.dispatchEvent(event);
},
downloadJSON(){
let pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(this.spritejson));
pom.setAttribute('download', 'sprite.json');
if (document.createEvent) {
let event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
pom.dispatchEvent(event);
} else {
pom.click();
}
}
}
})
</script>
</html>
