Html
    Css
    Js

    
                        
.wran {
	font-weight:bold;
}
input {
	margin-bottom:10px;
}
canvas {
	margin:10px;
}
div {
	margin:10px;
}
div img:hover {
	outline:1px solid #000;
	cursor:pointer;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

上传图片,生成并下载sprite图

注意:本代码生成sprite图的素材宽高是固定的,即每个子图片的size是相同的。设置好期望的雪碧图最大宽度,素材的宽高,点击下载即可看见sprite图的预览效果,并下载sprite图同时,提供了素材在sprite图中的位置,size信息的功能,方便代码编写。

0