HTML版图像精灵制作工具
公司项目性能调优,要把小图标合成一张大图片,以减少服务器请求。也就是要制作传说中的CSS图像精灵。
上百张图片,美工mm在photoshop里一个个的拖,太慢太累。也不是很复杂的工作,不如写个程序来做吧。
看Demo点这里
思路
- 选择磁盘上的小图标,支持多选。
- 把选中的小图标一张张的绘制到
canvas
上。
简单起见,纵向排列,每个小图标占一行,也就是最终canvas
上绘制了老长老长的内容。 canvas
导出png图片。
Show Me the Code
1. 支持多选的file input
<input type="file" accept="image/gif,image/jpg,image/jpeg,image/png,image/bmp"multiple>
type="file"
指定该input为文件选择框accept
限制可选文件类型multiple
表示支持多选
2. 绘制图标到canvas上
canvas
上绘制图片,要用到这个方法:
CanvasRenderingContext2d.drawImage(image, dx, dy)
- 参数
image
是绘制到canvas
上的元素
支持HTMLImageElement
、SVGImageElement
、HTMLCanvasElement
等。
在这次的程序中,我传入的是一个HTMLImageElement
,即dom元素img
。 - 参数
dx
指定小图标左上角在canvas
X轴上的位置 - 参数
dy
指定小图标左上角在canvas
Y轴上的位置
有了这个方法,我们就可以把一个
img
元素绘制到canvas
上了。但是怎么把fileInput
选中的文件转成img
元素呢?
读取选中的文件
fileInput
选完文件后会触发change
事件,事件监听器里,通过files
属性可以得到选中的文件。
fileInput.addEventListener('change', () => {let selectedFiles = fileInput.files;...
});
这里要注意一下:
selectedFiles
不是Array
对象,而是FileList
对象。
如果你想用Array
的方法操作,例如想按文件名排个序什么的,可以用下面的方法将它转化为Array
对象。
let selectedFiles = Array.prototype.slice.call(selectedFiles);
转化成img
元素
要使用到FileReader
去读取文件内容,以DataURL
的形式输出,设置给img.src
。
以selectedFiles
中的一个File
对象为例。
let fileReader = new FileReader();
let img = document.createElement('img');
fileReader.onload = () => {img.src = fileReader.result;img.onload = () => {// onload触发以后才能读到img的宽和高console.log(`${file.name}: ${img.width}px * ${img.height}`);};
};
fileReader.readAsDataURL(file);
3.canvas导出图片
简单的话,chrome右键canvas->图片另存为...
就可以了。
但这样不够直观,我想加一个导出图片的按钮。
首先来定义一个导出按钮。
<a id="exportBtn" class="button" download="compressed.png">导出图像精灵</a>
download="compressed.png"
这个属性可以让链接点击后,下载文件,并且以compressed.png
为文件名保存。
前面说到FileReader
读取文件内容,可以以DataURL
形式输出。
canvas.toDataURL(type, encoderOptions)
也可以把canvas
的内容以DataURL
形式输出。
Canvas
绘制完所有图标后,将DataURL
设置给导出按钮的href
即可。
exportBtn.href = canvas.toDataURL('png');
相关资料
- DataURL
- FileReader
- CanvasRenderingContext2d.drawImage()
- HTMLCanvasElement.toDataURL()
HTML版图像精灵制作工具相关推荐
- bios升级工具_雨林木风U盘启动盘装系统制作工具再次升级。。。
9.0内部版本修正升级,小伙伴可以点击阅读原文下载,无损升级测试使用...... 雨林木风U盘工具9.0升级说明:9.0升级说明 1.升级主程序,采用市场上最为流行的三分区模式,并且支持无损制作,提高 ...
- unity 程序获得焦点_Mac上的2D动画制作工具Moho Pro 12 for Mac独特的动画程序
Moho Pro 12mac版是一款运行在Mac端的2D动画制作软件,非常适合寻求更有效的传统动画替代品的专业人士.凭借直观的界面和强大的功能,如Smart Bones™,Smart Warp,Bez ...
- xp升级windows7_雨林木风U盘启动盘装系统制作工具再次升级。。。
9.0内部版本修正升级,小伙伴可以点击阅读原文下载,无损升级测试使用...... 雨林木风U盘工具9.0升级说明:9.0升级说明 1.升级主程序,采用市场上最为流行的三分区模式,并且支持无损制作,提高 ...
- 安装包制作工具 SetupFactory使用1 详解
Setup Factory 是一个强大的安装程序制作工具.提供了安装制作向导界面,即使你对安装制作不了解,也可以生成专业性质的安装程序.可建立快捷方式,也可直接在 Windows 系统的注册表加入内容 ...
- 01-1制作U盘启动盘--大白菜超级U盘启动盘制作工具
使用大白菜超级U盘启动盘制作工具制作U盘启动盘 工具/材料: 电脑.U盘.浏览器.大白菜u盘启动制作工具. 操作方法: 打开浏览器,输入大白菜,点击普通下载进行大白菜u盘启动制作工具下载: 或者通过 ...
- 程序安装包制作工具 v1.0官方版
2019独角兽企业重金招聘Python工程师标准>>> 名称:程序安装包制作工具 v1.0官方版 版本:1.0更新日期:2016-06-27 大小:2.9MB软件语言:简体中文 软件 ...
- 常用的6款Java开源报表制作工具
本文为大家推荐6款常用的Java开源报表制作工具,供开发者学习.参考. 1.Aspose.Cells for JasperReports 一个基于Java的开源报表工具,它可以在Java环境下像其他I ...
- linux系统启动盘怎么制作工具,windows系统制作linux启动盘工具介绍
Linux发行版排行榜: http://iso.linuxquestions.org/ http://distrowatch.com/dwres.php?resource=major&lang ...
- 微软制作工具_大白菜U盘启动盘制作
系统镜像一般为ISO格式,ISO文件里面含有GHO/WIM/ESD等系统安装文件,安装系统实际上就是将GHO WIM或ESD等文件还原/解压到硬盘分区上并重建Windows系统引导的过程.一般情况下G ...
最新文章
- c++文件读取空格_程序员术与道:术—C语言对文件进行处理,文件处理的基本操作...
- vue拖动添加模块展示_一个全新的Vue拖拽特性实现:“移动”部分
- Vicious Keyboard CodeForces - 801A (暴力+模拟)
- N76E003快速上手使用和大坑提示
- 程序员,想要彻底弄懂Redis,这15点你一定要明白~(纯干货)
- weka分类器怎么设置样本类别_NeurIPS 2019 少样本学习研究亮点全解析
- Python温度转换器
- python import pandas报错找不到_扎心!“我学了半年 Python,还是找不到工作”
- CSS实现水平垂直居中的方法总结
- php精准函数,PHP常用函数大全
- Spring —— 静态成员的注入
- 研究下抓站开源项目simplecd的源代码吧
- 《深入解析Windows操作系统第4版》随笔记录03
- cad命令栏还原默认_CAD命令行不见了怎么重新恢复?
- window10家庭版安装docker记录
- java中描述价格_JAVA中价格金额的存储类型
- ibatis oracle批量insert,ibatis 批量插入oracle总结
- 基于多项式螺旋曲线的轨迹优化
- 【许晓笛】49行代码就能发币?而且EOS连例子都给你了
- 从柯布-道格拉斯生产函数看云计算对传统软件工程的影响
热门文章
- 万物互联时代,LED显示屏行业机遇与挑战并存
- a标签获取value值
- 查看linux驱动使用的头文件,[转载]linux下usb驱动头文件的usb.h(二)
- python随机模块 无范围_Python模块:生成随机数模块random
- 执行 tensorboard --logdir logs遇到的浏览器中输入http://localhost:6006 网址打不开的问题
- 【SLAM】Kimera-Multi (IEEE-TRO2022 年最佳论文傅京孙)
- 搭建web服务器,创建基于域名的虚拟主机
- 百度关键词排名优化软件【胖虎图图-互动点击系统】
- IM1281B单相交流计量模块使用讲解
- [字典树+KM]hdoj 2813:One fihgt one