JQ+vue实现图片拼接（无限套娃版）

css样式

   /* css初始化 */
        
        * {
            margin: 0;
            padding: 0;
        }
        /* 去掉li的小圆点 */
        
        li {
            list-style: none;
        }
        /* 去掉a的下划线 */
        
        a {
            text-decoration: none;
        }
        /* 搜索框去除边框 */
        
        input,
        button,
        select {
            border: 0;
            /* 设置背景颜色为透明 */
            background-color: transparent;
            /* 去掉外轮廓 */
            outline: none;
        }
        /* em和i标签字体样式 */
        
        em,
        i {
            font-style: normal;
        }
        /* 图片的空白间隙 */
        
        img {
            vertical-align: middle;
        }
        /* 清除浮动 */
        
        .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        /* 左浮动 */
        
        .fl {
            float: left;
        }
        /* 右浮动 */
        
        .fr {
            float: right;
        }
        
        body {
            background-color: #000;
            color: #fff;
        }
        
        .lay-box {
            display: flex;
        }
        
        .lay-left {
            flex: 0.5;
            margin-top: 2%;
            margin-top: 2%;
        }
        
        .lay-center {
            flex: 2.3;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10%;
            position: relative;
            flex-direction: column;
            min-height: 500px;
        }
        
        .lay-center-top {
            display: flex;
            width: 100%;
            height: 100%;
        }
        
        .lay-center-bottom {
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 1000000;
        }
        
        .lay-right {
            display: flex;
            flex-direction: column;
            flex: 0.2;
            margin-top: 2%;
            z-index: 100000;
        }
        
        .automatic,
        .manual {
            background-color: #22AF90;
            text-align: center;
            padding: 10px 0px;
            border-radius: 5px;
            width: 100%;
            cursor: pointer;
        }
        
        .automatic {
            margin-bottom: 20px;
        }
        
        .lay-centers {
            display: flex;
        }
        
        .lay-center-left,
        .lay-center-right {
            width: 100%;
            height: 100%;
        }
        
        .lay-center-leftimg,
        .lay-center-rightimg {
            width: 100%;
            height: 100%;
        }
        
        .lay-ui {
            display: flex;
        }
        
        .lay-left-contont .lay-ui .choice {
            margin-right: 10px;
        }
        
        .choiceclose {
            margin-right: 10px;
        }
        
        .choiceImg {
            width: 30%;
            height: 30%;
        }
        
        .lay-left-top {
            margin-bottom: 20px;
        }
        /*加载的样式*/
        
        .box {
            border-radius: 4px;
            height: 20px;
            width: 170px;
            background: #ebebeb;
            position: relative;
        }
        
        .box .line {
            background: rgb(92, 151, 4);
            height: 20px;
            text-indent: 999px;
        }
        
        .title {
            font-size: 18px;
            color: #000;
            margin-bottom: 20px;
        }
        
        .loadding {
            position: fixed;
            width: 14%;
            height: 12%;
            background: #fff;
            top: 50%;
            left: 50%;
            margin-top: -6%;
            margin-left: -7%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        #canvas {
            position: absolute;
            display: none;
        }
        
        #que,
        .clear,
        #undo {
            background-color: #22AF90;
            text-align: center;
            padding: 10px 0px;
            border-radius: 5px;
            width: 10%;
            cursor: pointer;
            display: none;
        }
        
        #imgnewtwo {
            display: none;
        }
        
        .lay-join-box {
            margin-top: 2%;
        }
        
        .lay-joint {
            display: flex;
            margin-top: 1%;
        }
        
        .error {
            margin-bottom: 50px;
            font-size: 18px;
        }

html结构
     

        
正在拼接中，请稍后...
        

            

        
    
    

        

            

                
                

                    
                    
                
                
                

                    
已拼接
                    

                        
                        
                        ×
                    
                


            
        
        

            

                
                
                

                    

                        
                    
                

                
                

                    
                    
                    
                    
                
            
            

                确定
                取消
                撤销
            


        
        

            自动拼接
            手动拼接
        
    

js代码

数据可以自行模拟
引入了vue.js jquery.js pako.js