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

Html

Css

生成sprite图的素材建议严格按照选择的素材宽高比，否则会出现失真，拉伸情况!!!

设置生成雪碧图的期望最大宽度
素材宽度素材高度
Choose file to upload

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

(function() {
    var imageWidth = 32,
        imageHeight = 32,
        imageGap = 2,
        maxWidth = 200,
        imageURLs = [],
        spriteType = "fixedSize",

fileDom = document.getElementById("file"),
        maxWidthDom = document.getElementById("maxWidth"),
        imageWidthDom = document.getElementById("width"),
        imageHeightDom = document.getElementById("height"),
        downloadDom = document.getElementById("download");

fileDom.addEventListener('change', function() {
        let len = this.files.length;
        for (let i = 0; i < len; i++) {
            let url = getObjectURL(this.files[i]);
            imageURLs.push(url)
        }
    });
    maxWidthDom.addEventListener("change", function() {
        maxWidth = parseFloat(this.value);
        if (maxWidth < imageWidth) {
            this.value = maxWidth = imageWidth
        }
    });
    imageWidthDom.addEventListener("change", function() {
        imageWidth = parseFloat(this.value);
        if (maxWidth < imageWidth) {
            this.value = imageWidth = maxWidth
        }
    });
    imageHeightDom.addEventListener("change", function() {
        imageHeight = parseFloat(this.value);
    });
    downloadDom.addEventListener("click", function() {
        downloadSprite();
    })

function downloadSprite() {
        let spriteWidth = 0,
            spriteHeight = 0,
            spriteInfo = [];
        if (spriteType == "fixedSize") {
            let lineWidth = 0;
            spriteHeight = imageHeight;

imageURLs.forEach(url => {
                if (lineWidth + imageWidth <= maxWidth) {
                    setFixedSizeImageInfo(url, lineWidth, spriteHeight - imageHeight);
                    lineWidth += (imageGap + imageWidth);

} else {
                    // 换行
                    setFixedSizeImageInfo(url, 0, spriteHeight + imageGap);
                    spriteHeight += (imageHeight + imageGap);
                    spriteWidth = (lineWidth - imageGap);

lineWidth = imageWidth + imageGap;
                }
            });
        }

let canvas = document.createElement("canvas"),
            wrap = document.createElement("div"),
            fragment = document.createDocumentFragment(),
            info = document.createElement("p"),
            note1 = document.createElement("p"),
            note2 = document.createElement("p");

note1.innerText = "生成的sprite图如下：";
        note2.innerText = "点击下方图片获取各个图片在sprite图中位置和大小信息";
        canvas.width = spriteWidth;
        canvas.height = spriteHeight;
        // document.body.appendChild(canvas);
        let ctx = canvas.getContext("2d");

wrap.style.width = spriteWidth + "px";
        wrap.style.height = spriteHeight + "px";
        wrap.style.position = "relative";
        document.body.appendChild(note1)
        document.body.appendChild(canvas);
        document.body.appendChild(note2)
        document.body.appendChild(wrap);
        document.body.appendChild(info);

let len = imageURLs.length,
            count = 0;
        spriteInfo.forEach((item, index) => {
            createImage(item.image, item.x, item.y);
            wrap.appendChild(fragment);

wrap.addEventListener("click", function(ev) {
                let tar = ev.target;
                info.innerHTML = 'x:' + tar.offsetLeft + " y:" + tar.offsetTop + " width:" + tar.width + " height:" + tar.height;
            })
            item.image.onload = function() {
                ctx.drawImage(item.image, item.x, item.y, imageWidth, imageHeight);
                count++;
                if (count == len - 1) {
                    let dataURL = canvas.toDataURL(),
                        a = document.createElement("a"),
                        ev = new MouseEvent("click");
                    a.download = "sprite";
                    a.href = dataURL;
                    a.dispatchEvent(ev);
                }
            }
        });

function createImage(image, x, y) {
            image.style.position = "absolute";
            image.style.left = x + "px";
            image.style.top = y + "px";
            fragment.appendChild(image);
        }

function setFixedSizeImageInfo(url, x, y) {
            var img = new Image();
            img.src = url;
            img.width = imageWidth;
            img.height = imageHeight;
            spriteInfo.push({
                image: img,
                x: x,
                y: y
            });
        }
    }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

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



代码描述：代替PS，在web端生成并下载sprite图

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

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

kingforest

相关代码

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

最新