雪碧图生成代码

        
        

            
排列方向
            
            
            
        
    

var canvas = document.querySelector('#canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = 800;
        canvas.height = 800;
        var ImgArr = [];
        var result = '';
        var x = 0,
            y = 0;
        canvas.addEventListener('dragover', function (e) {
            e.preventDefault();


        })
        canvas.addEventListener('drop', function (e) {

            e.preventDefault();
            var files = e.dataTransfer.files;
            var len = files.length;
            var i = 0;
            (function () {
                var _me = arguments.callee;

                if (i < len) {

                    //    var ImgObj={
                    //        w:
                    //        h:
                    //        name:
                    //        src:

                    //    }
                    var ImgObj = new Object();
                    var file = files[i];
                    ImgObj.src = window.URL.createObjectURL(file);
                    ImgObj.name = file.name.match(/^(.+)\.(?:png|jpe?g|svg)$/)[1];
                    ImgObj.img = new Image();
                    ImgObj.img.src = ImgObj.src;
                    ImgObj.img.onload = function () {
                        ImgObj.w = ImgObj.img.width;
                        ImgObj.h = ImgObj.img.height;
                        ImgArr.push(ImgObj)

                        _me();
                    }
                    i++;
                }

                else { main() };
            }())
        })



        var config = {
            dir: "vertical"
        };


        $('fieldset').on('click', '.btn', function () {
            var val = $(this).val();
            var key = $(this).attr('key');

            config[key] = val;


        })

        function main() {

            arrayImage();
            createCss();
        }

        function arrayImage() {
            //图片排列函数
            if (config.dir === 'vertical') {
                ImgArr.forEach(function (item, index) {

                    var image = item.img;
                    var width = image.width;
                    var height = image.height;
                    y += height;

                    item.x = 0;
                    item.y = y - height;
                    ctx.drawImage(image, 0, item.y, width, height);
                    console.log(image);

                })
            } else if (config.dir === 'binTree') {
                ImgArr.forEach(function (item, index) {
                    var image = item.img;
                    var width = image.width;
                    var height = image.height;
                    y += width
                    item.y = 0;
                    item.x = y - width;
                    ctx.drawImage(image, item.x, 0, width, height);
                    console.log(image);

                })
            }

        }
        //css生成
        function createCss() {
            ImgArr.forEach(function (item, index) {
                var css = [
                    '.icon-' + item.name + '{\n',
                    'background-image:url(' + item.src + ');\n',
                    'background-size:' + item.w + 'px ' + item.h + 'px;\n',
                    'background-position:' + item.x + 'px  -' + item.y + 'px;\n',
                    '}\n'
                ].join('');
                result += css;
            })
            console.log(result);
        }