Home Explore Help
Register Sign In
chenzhiguang
/
SZGD
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

初步完工

shaogen1995 4 years ago
parent
9953a7de7c
commit
f066f1f015
12 changed files with 272 additions and 69 deletions
Unified View Show Diff Stats
  1. 159 50
      index.html
  2. BIN
      static/images/adds/watermark.png
  3. BIN
      static/images/bac/01.jpg
  4. BIN
      static/images/bac/02.jpg
  5. BIN
      static/images/bac/03.jpg
  6. BIN
      static/images/bac/04.jpg
  7. BIN
      static/images/bac/05.jpg
  8. BIN
      static/images/bac/06.jpg
  9. BIN
      static/images/bac/999.jpg
  10. 40 19
      static/js/app.js
  11. 20 0
      static/js/html2canvas.js
  12. 53 0
      text.html

+ 159 - 50
index.html
View File 

@@ -17,14 +17,14 @@
 
   <style>
 
   <style>
 
     .BAC {
 
     .BAC {
 
       z-index: 999;
 
       z-index: 999;
 
-      background: url('./static/images/adds/1.jpg') no-repeat center;
 
+      background: url('./static/images/bac/06.jpg') no-repeat center;
 
       background-size: cover;
 
       background-size: cover;
 
       width: 100vw;
 
       width: 100vw;
 
       height: 100vh;
 
       height: 100vh;
 
       position: absolute;
 
       position: absolute;
 
       top: 0;
 
       top: 0;
 
       left: 0;
 
       left: 0;
 
-      display: block;
 
+      display: none;
 
       overflow: hidden;
 
       overflow: hidden;
 
     }
 
     }
 
 
 
@@ -35,56 +35,127 @@
 
       position: absolute;
 
       position: absolute;
 
       top: 50%;
 
       top: 50%;
 
       left: 50%;
 
       left: 50%;
 
-      transform: translate(-50%,-50%);
 
+      transform: translate(-50%, -50%);
 
     }
 
     }
 
+
 
     .BAC_son img {
 
     .BAC_son img {
 
       width: 100%;
 
       width: 100%;
 
       height: 100%;
 
       height: 100%;
 
     }
 
     }
 
-    .but{
 
+
 
+    .but {
 
       z-index: 1000;
 
       z-index: 1000;
 
       position: absolute;
 
       position: absolute;
 
       left: 50%;
 
       left: 50%;
 
       transform: translateX(-50%);
 
       transform: translateX(-50%);
 
-      bottom: 40px;
 
+      bottom: 50px;
 
       display: flex;
 
       display: flex;
 
       justify-content: space-between;
 
       justify-content: space-between;
 
       width: 70%;
 
       width: 70%;
 
       height: 40px;
 
       height: 40px;
 
+      display: none;
 
     }
 
     }
 
+
 
     .but img {
 
     .but img {
 
       height: 100%;
 
       height: 100%;
 
     }
 
     }
 
-    .box{
 
+
 
+    .but img:nth-of-type(2) {
 
+      float: right;
 
+    }
 
+
 
+    .box {
 
       position: absolute;
 
       position: absolute;
 
       width: 100%;
 
       width: 100%;
 
       height: 85%;
 
       height: 85%;
 
       bottom: 0;
 
       bottom: 0;
 
       left: 0;
 
       left: 0;
 
     }
 
     }
 
-    .BAC_son .arrows{
 
+
 
+    .BAC_son .arrows {
 
       position: absolute;
 
       position: absolute;
 
       right: 0;
 
       right: 0;
 
       top: 0;
 
       top: 0;
 
       width: 30px;
 
       width: 30px;
 
       height: 30px;
 
       height: 30px;
 
     }
 
     }
 
+
 
+    .watermark {
 
+      position: absolute;
 
+      bottom: 0;
 
+      right: 0;
 
+      width: 300px;
 
+      z-index: 1001;
 
+    }
 
+    .poster-container {
 
+      position: absolute;
 
+      width: 100vw;
 
+      height: 100vh;
 
+      display: none;
 
+      z-index: 1005;
 
+    }
 
+    #myIMG{
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
+    body {
 
+      overflow: hidden;
 
+    }
 
+    .return {
 
+      position: absolute;
 
+      top: 100px;
 
+      left: 50%;
 
+      transform: translateX(-50%);
 
+      background-color: rgba(0, 0, 0, .8);
 
+      color: #fff;
 
+      font-size: 18px;
 
+      width: 100%;
 
+      height: 80px;
 
+      line-height: 80px;
 
+      text-align: center;
 
+    }
 
+    .goBack {
 
+      position: absolute;
 
+      left: 10px;
 
+      bottom: 10px;
 
+      width: 50px;
 
+      height: 30px;
 
+      background-color: rgb(255, 255, 255);
 
+    }
 
+    .goBack img {
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
+    .mybox {
 
+      display: none !important;
 
+    }
 
   </style>
 
   </style>
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
+  <!-- 生成的图片 -->
 
+  <div class="poster-container">
 
+    <!-- 提示 -->
 
+    <div class="return">请长按图片保存</div>
 
+    <!-- 返回 -->
 
+    <div class="goBack">
 
+      <img src="./static/images/back.png" alt="">
 
+    </div>
 
+    <img id="myIMG" src="/" alt="">
 
+  </div>
 
   <!-- 背景图和人像图 -->
 
   <!-- 背景图和人像图 -->
 
-  <div class="BAC">
 
+  <div class="BAC" id="saveWrapX">
 
+    <img class="watermark" src="./static/images/adds/watermark.png" alt="">
 
     <div class="BAC_son">
 
     <div class="BAC_son">
 
       <img class="arrows" src="./static/images/adds/fangda.png" alt="">
 
       <img class="arrows" src="./static/images/adds/fangda.png" alt="">
 
       <div class="box">
 
       <div class="box">
 
       </div>
 
       </div>
 
-      <img src="./static/images/adds/33.png" alt="">
 
+      <img class="myImg" src="" alt="">
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
   <div class="but">
 
   <div class="but">
 
     <img class="cancel" src="./static/images/adds/22.png" alt="">
 
     <img class="cancel" src="./static/images/adds/22.png" alt="">
 
-    <img src="./static/images/adds/11.png" alt="">
 
+    <img class="save" src="./static/images/adds/11.png" alt="">
 
   </div>
 
   </div>
 
 
 
 
 
@@ -155,7 +226,7 @@
 
       <a class="btn-link" href="javascript:;">刷新页面</a>
 
       <a class="btn-link" href="javascript:;">刷新页面</a>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
-  <div class="app-view">
 
+  <div class="app-view mybox">
 
     <div class="img"></div>
 
     <div class="img"></div>
 
     <div class="tip">
 
     <div class="tip">
 
       <div>
 
       <div>
 
@@ -238,14 +309,15 @@
 
   <script src="static/js/config.js"></script>
 
   <script src="static/js/config.js"></script>
 
   <script src="static/js/app.js"></script>
 
   <script src="static/js/app.js"></script>
 
   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
 
   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
 
+  <script src="./static/js/html2canvas.js"></script>
 
 </body>
 
 </body>
 
 <script>
 
 <script>
 
   // 获取最大盒子的宽高
 
   // 获取最大盒子的宽高
 
-  let BACwidth =$('.BAC').width()
 
-  let BACheight =$('.BAC').height()
 
+  let BACwidth = $('.BAC').width()
 
+  let BACheight = $('.BAC').height()
 
   // 初始盒子的位移
 
   // 初始盒子的位移
 
-  let BACSonTop =$('.BAC_son').offset().top
 
-  let BACSonLeft =$('.BAC_son').offset().left
 
+  let BACSonTop = $('.BAC_son').offset().top
 
+  let BACSonLeft = $('.BAC_son').offset().left
 
 
 
   let _x_start, _y_start, _x_move, _y_move, _x_end, _y_end, left_start, top_start;
 
   let _x_start, _y_start, _x_move, _y_move, _x_end, _y_end, left_start, top_start;
 
   $('.box').on('touchstart', function (e) {
 
   $('.box').on('touchstart', function (e) {
 
@@ -258,62 +330,99 @@
 
 
 
   $('.box').on('touchmove', function (e) {
 
   $('.box').on('touchmove', function (e) {
 
     //获取当前盒子的宽高
 
     //获取当前盒子的宽高
 
-    let BACSonWidth =$('.BAC_son').width()
 
-    let BACSonHeight =$('.BAC_son').height()
 
+    let BACSonWidth = $('.BAC_son').width()
 
+    let BACSonHeight = $('.BAC_son').height()
 
 
 
     _x_move = e.touches[0].pageX;
 
     _x_move = e.touches[0].pageX;
 
     _y_move = e.touches[0].pageY;
 
     _y_move = e.touches[0].pageY;
 
     // console.log("move",_x_move)
 
     // console.log("move",_x_move)
 
-    let myLeft =parseFloat(_x_move) - parseFloat(_x_start) + parseFloat(left_start)
 
-    if(myLeft<BACSonWidth/2) myLeft=BACSonWidth/2
 
-    if(myLeft>BACwidth-BACSonWidth+BACSonLeft) myLeft=BACwidth-BACSonWidth/2
 
-    let myTop  =parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start)
 
-    if(myTop<BACSonHeight/2) myTop=BACSonHeight/2
 
-    if(myTop>BACheight-BACSonHeight+BACSonLeft) myTop=BACheight-BACSonHeight/2
 
+    let myLeft = parseFloat(_x_move) - parseFloat(_x_start) + parseFloat(left_start)
 
+    if (myLeft < BACSonWidth / 2) myLeft = BACSonWidth / 2
 
+    if (myLeft > BACwidth - BACSonWidth + BACSonLeft + 100) myLeft = BACwidth - BACSonWidth / 2
 
+    let myTop = parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start)
 
+    if (myTop < BACSonHeight / 2) myTop = BACSonHeight / 2
 
+    if (myTop > BACheight - BACSonHeight + BACSonTop + 200) myTop = BACheight - BACSonHeight / 2
 
     $('.BAC_son').css("left", myLeft + "px");
 
     $('.BAC_son').css("left", myLeft + "px");
 
     $('.BAC_son').css("top", myTop + "px");
 
     $('.BAC_son').css("top", myTop + "px");
 
     // console.log(parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start));
 
     // console.log(parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start));
 
   })
 
   })
 
   $('.box').on('touchend', function (e) {
 
   $('.box').on('touchend', function (e) {
 
-    let _x_end=e.changedTouches[0].pageX;
 
-    let _y_end=e.changedTouches[0].pageY;
 
+    let _x_end = e.changedTouches[0].pageX;
 
+    let _y_end = e.changedTouches[0].pageY;
 
   })
 
   })
 
   //阻止浏览器下拉事件
 
   //阻止浏览器下拉事件
 
-  $('BAC').on('touchmove', function (event) {event.preventDefault();});
 
-  
-//------------------------------按住箭头放大图片-------------------------
 
-let zoom_xS,zoom_yS,zoom_xE,zoom_yE
 
-$('.arrows').on('touchstart', function (e) {
 
-  //获取初始的手指按下位置
 
-  zoom_xS = e.touches[0].pageX;
 
-  zoom_yS = e.touches[0].pageY;
 
-  // console.log('按住了');
 
-})
 
+  $('BAC').on('touchmove', function (event) { event.preventDefault(); });
 
+
 
+  //------------------------------按住箭头放大图片-------------------------
 
+  let zoom_xS, zoom_yS, zoom_xE, zoom_yE
 
+  $('.arrows').on('touchstart', function (e) {
 
+    //获取初始的手指按下位置
 
+    zoom_xS = e.touches[0].pageX;
 
+    zoom_yS = e.touches[0].pageY;
 
+    // console.log('按住了');
 
+  })
 
 
 
-$('.arrows').on('touchmove', function (e) {
 
-      //获取当前盒子的宽高
 
-    let BACSonWidth =$('.BAC_son').width()
 
-    let BACSonHeight =$('.BAC_son').height()
 
+  $('.arrows').on('touchmove', function (e) {
 
+    //获取当前盒子的宽高
 
+    let BACSonWidth = $('.BAC_son').width()
 
+    let BACSonHeight = $('.BAC_son').height()
 
 
 
-  //移动后的手指位置
 
-  zoom_xE = e.touches[0].pageX;
 
-  zoom_yE = e.touches[0].pageY;
 
-  console.log(zoom_xE-zoom_xS,zoom_yE-zoom_yS);
 
+    //移动后的手指位置
 
+    zoom_xE = e.touches[0].pageX;
 
+    zoom_yE = e.touches[0].pageY;
 
+    // console.log(zoom_xE-zoom_xS,zoom_yE-zoom_yS);
 
     // console.log('移动了',e.touches[0].pageX,e.touches[0].pageY);
 
     // console.log('移动了',e.touches[0].pageX,e.touches[0].pageY);
 
-    if(zoom_xE-zoom_xS>0)     $('.BAC_son').css('width',BACSonWidth+5)
 
-  else $('.BAC_son').css('width',BACSonWidth-5)
 
+    if (zoom_xE - zoom_xS > 0) $('.BAC_son').css('width', BACSonWidth + 5)
 
+    else $('.BAC_son').css('width', BACSonWidth - 5)
 
     // if() $('.BAC_son').css('height',BACSonWidth-3)
 
     // if() $('.BAC_son').css('height',BACSonWidth-3)
 
     // else $('.BAC_son').css('height',BACSonHeight+3)
 
     // else $('.BAC_son').css('height',BACSonHeight+3)
 
-})
 
+  })
 
 
 
 
 
   // 点击取消
 
   // 点击取消
 
-  $('.cancel').on('click',function(e){
 
-    $('.BAC').css('display','none')
 
-    $('.but').css('display','none')
 
+  $('.cancel').on('click', function (e) {
 
+    $('.BAC').css('display', 'none')
 
+    $('.but').css('display', 'none')
 
+  })
 
+
 
+  // 选择背景图
 
+  $('.btn-pic-take').on('click', function (e) {
 
+    setTimeout(() => {
 
+      let aaa = $('.swiper-wrapper .active')
 
+      // console.log(11111111, aaa.attr('data-msg'));
 
+      if (aaa.attr('data-msg')) {
 
+        // background-image: url('./static/images/bac/0'+'1.jpg');
 
+        let url = './static/images/bac/0' + aaa.attr('data-msg') + '.jpg'
 
+        // console.log(6666666, url);
 
+        $('.BAC').css('background', `url(${url}) no-repeat center`)
 
+      }
 
+    }, 100);
 
+  })
 
+
 
+  //点击保存
 
+  $('.save').on('click', function (event) {
 
+  // 先隐藏箭头
 
+  $('.arrows').css('display', 'none')
 
+    html2canvas(document.getElementById("saveWrapX"),{
 
+      // proxy:'http://fdart-huadong.oss-cn-shanghai.aliyuncs.com',
 
+      useCORS: true,
 
+      scale:1}).then(function(canvas) {
 
+    document.querySelector('.poster-container').appendChild(canvas);
 
+    let canvas1 = $('.poster-container canvas')
 
+    let posterImage = document.getElementById("myIMG")
 
+    posterImage.src = canvas1[0].toDataURL("image/jpg")
 
+  })
 
+  $('.poster-container').css('display', 'block')
 
+    $('.BAC').css('display', 'none')
 
+    $('.but').css('display', 'none')
 
+    
+  });
 
+// 生成图片后点击返回
 
+  $('.goBack').on('click', function (event) {
 
+    $('.poster-container').css('display', 'none')
 
+    window.location.reload()
 
   })
 
   })
 
 
 
-  
 </script>
 
 </script>
 
 
 
 </html>
 
 </html>

BIN
static/images/adds/watermark.png
View File


BIN
static/images/bac/01.jpg
View File


BIN
static/images/bac/02.jpg
View File


BIN
static/images/bac/03.jpg
View File


BIN
static/images/bac/04.jpg
View File


BIN
static/images/bac/05.jpg
View File


BIN
static/images/bac/06.jpg
View File


BIN
static/images/bac/999.jpg
View File


+ 40 - 19
static/js/app.js
View File 

@@ -85,7 +85,7 @@ var app = {
 
 
 
         let html = ''
 
         let html = ''
 
 
 
-        if (this.type==2) {
 
+        if (this.type == 2) {
 
             html = `<div class="swiper-wrapper">
 
             html = `<div class="swiper-wrapper">
 
                 <div data-msg="1" class="swiper-slide style-1"></div>
 
                 <div data-msg="1" class="swiper-slide style-1"></div>
 
                 <div data-msg="2" class="swiper-slide style-2"></div>
 
                 <div data-msg="2" class="swiper-slide style-2"></div>
 
@@ -94,7 +94,7 @@ var app = {
 
                 <div data-msg="5" class="swiper-slide style-5"></div>
 
                 <div data-msg="5" class="swiper-slide style-5"></div>
 
                 <div data-msg="6" class="swiper-slide style-6"></div>
 
                 <div data-msg="6" class="swiper-slide style-6"></div>
 
             </div>`
 
             </div>`
 
-        } else{
 
+        } else {
 
             html = `<div class="swiper-wrapper">
 
             html = `<div class="swiper-wrapper">
 
                 <div data-msg="1" class="swiper-slide style-1"></div>
 
                 <div data-msg="1" class="swiper-slide style-1"></div>
 
                 <div data-msg="2" class="swiper-slide style-2"></div>
 
                 <div data-msg="2" class="swiper-slide style-2"></div>
 
@@ -125,17 +125,17 @@ var app = {
 
                 }
 
                 }
 
                 tmp = 'bg '
 
                 tmp = 'bg '
 
                 app.bgId = msg
 
                 app.bgId = msg
 
-            }else{
 
+            } else {
 
                 if (app.switchId == msg) {
 
                 if (app.switchId == msg) {
 
                     // 已选择的不再执行
 
                     // 已选择的不再执行
 
                     return;
 
                     return;
 
                 }
 
                 }
 
                 tmp = 'switch '
 
                 tmp = 'switch '
 
                 app.switchId = msg
 
                 app.switchId = msg
 
-                
+
 
             }
 
             }
 
 
 
-           
+
 
 
 
             if (!app.sendCheck()) {
 
             if (!app.sendCheck()) {
 
                 return;
 
                 return;
 
@@ -152,7 +152,7 @@ var app = {
 
             }
 
             }
 
 
 
             time = Date.now();
 
             time = Date.now();
 
-           
+
 
 
 
             app.send(tmp + msg)
 
             app.send(tmp + msg)
 
         });
 
         });
 
@@ -161,7 +161,7 @@ var app = {
 
             var style = $(this).data('msg');
 
             var style = $(this).data('msg');
 
             if (style) {
 
             if (style) {
 
                 var img = new Image()
 
                 var img = new Image()
 
-                img.src = (__config.staticUrl || 'static') + `/images/styles${app.type==2?'1':''}/` + style + '-active.png';
 
+                img.src = (__config.staticUrl || 'static') + `/images/styles${app.type == 2 ? '1' : ''}/` + style + '-active.png';
 
             }
 
             }
 
         })
 
         })
 
     },
 
     },
 
@@ -200,19 +200,19 @@ var app = {
 
             $picList.hide()
 
             $picList.hide()
 
         });
 
         });
 
 
 
-        
 
 
-        $('.swt-style').on('click','a', function (event) {
 
+
 
+        $('.swt-style').on('click', 'a', function (event) {
 
             self.type = $(event.currentTarget).data('id')
 
             self.type = $(event.currentTarget).data('id')
 
             $(event.currentTarget).addClass("active").siblings().removeClass("active");
 
             $(event.currentTarget).addClass("active").siblings().removeClass("active");
 
             self.stlSwiper()
 
             self.stlSwiper()
 
-            if (self.type==2) {
 
+            if (self.type == 2) {
 
                 $('.stl-swiper').addClass('stl-swiper1')
 
                 $('.stl-swiper').addClass('stl-swiper1')
 
-            }else {
 
+            } else {
 
                 $('.stl-swiper').removeClass('stl-swiper1')
 
                 $('.stl-swiper').removeClass('stl-swiper1')
 
             }
 
             }
 
             $('.swiper-wrapper').find('.swiper-slide').removeClass('active');
 
             $('.swiper-wrapper').find('.swiper-slide').removeClass('active');
 
-                    $(`.swiper-slide[data-msg=${self.type==2?self.bgId:self.switchId}]`).addClass('active');
 
+            $(`.swiper-slide[data-msg=${self.type == 2 ? self.bgId : self.switchId}]`).addClass('active');
 
         });
 
         });
 
 
 
         $('.btn-pic-list').on('click', function (event) {
 
         $('.btn-pic-list').on('click', function (event) {
 
@@ -222,6 +222,9 @@ var app = {
 
         });
 
         });
 
 
 
         $('.btn-pic-take').on('click', function (event) {
 
         $('.btn-pic-take').on('click', function (event) {
 
+
 
+            //显示图片拖拉功能
 
+            $('.arrows').css('display', 'block')
 
             app.checkOperationTimeout()
 
             app.checkOperationTimeout()
 
 
 
             if (!app.sendCheck()) {
 
             if (!app.sendCheck()) {
 
@@ -235,6 +238,7 @@ var app = {
 
             self.hideView()
 
             self.hideView()
 
         });
 
         });
 
 
 
+
 
         $('.app-alert .btn-use').on('click', function () {
 
         $('.app-alert .btn-use').on('click', function () {
 
             var $alert = $('.app-alert')
 
             var $alert = $('.app-alert')
 
             app.hideMask()
 
             app.hideMask()
 
@@ -245,6 +249,10 @@ var app = {
 
             }
 
             }
 
 
 
         })
 
         })
 
+        //点击刷新页面
 
+        $('.btn-link').on('click', function () {
 
+            window.location.reload()
 
+        })
 
 
 
         $('.app-alert .btn-link').on('click', function () {
 
         $('.app-alert .btn-link').on('click', function () {
 
             if ($(this).text() == '重新拍照') {
 
             if ($(this).text() == '重新拍照') {
 
@@ -260,7 +268,8 @@ var app = {
 
         if (clazz) {
 
         if (clazz) {
 
             $elem.addClass(this.showMask._clazz = clazz)
 
             $elem.addClass(this.showMask._clazz = clazz)
 
         }
 
         }
 
-        $elem.css('display', 'block')
 
+        // $elem.css('display', 'block')
 
+        $elem.css('display', 'none')
 
     },
 
     },
 
     hideMask: function () {
 
     hideMask: function () {
 
         var $elem = $('.app-mask');
 
         var $elem = $('.app-mask');
 
@@ -325,6 +334,9 @@ var app = {
 
         $('.app-action-tips .content').css('display', 'none');
 
         $('.app-action-tips .content').css('display', 'none');
 
         $('.app-action-tips .content.loading').css('display', 'block').find('.tips').html(msg);
 
         $('.app-action-tips .content.loading').css('display', 'block').find('.tips').html(msg);
 
         $('.app-action-tips').addClass('animated zoomIn') //.animateCss('zoomIn')
 
         $('.app-action-tips').addClass('animated zoomIn') //.animateCss('zoomIn')
 
+
 
+
 
+
 
     },
 
     },
 
     hideLoading: function () {
 
     hideLoading: function () {
 
         this.hideMask();
 
         this.hideMask();
 
@@ -335,7 +347,7 @@ var app = {
 
         this.showMask();
 
         this.showMask();
 
         $('.app-action-tips .content').css('display', 'none');
 
         $('.app-action-tips .content').css('display', 'none');
 
         $('.app-action-tips .content.loading-switch').css('display', 'block')
 
         $('.app-action-tips .content.loading-switch').css('display', 'block')
 
-        $('.app-action-tips .content.loading-switch .tips').html('正在切换'+(app.type==2?'风景':'画风'))
 
+        $('.app-action-tips .content.loading-switch .tips').html('正在切换' + (app.type == 2 ? '风景' : '画风'))
 
         $('.app-action-tips').animateCss('zoomIn', function ($elem, aname) {
 
         $('.app-action-tips').animateCss('zoomIn', function ($elem, aname) {
 
             setTimeout(function () {
 
             setTimeout(function () {
 
                 app.hideMask();
 
                 app.hideMask();
 
@@ -351,7 +363,7 @@ var app = {
 
         console.log('====================================');
 
         console.log('====================================');
 
         this.imgList.forEach(function (item) {
 
         this.imgList.forEach(function (item) {
 
             html.push('<div class="swiper-slide">');
 
             html.push('<div class="swiper-slide">');
 
-            html.push('    <div class="img'+(item.vertical?' vertical':'')+'">');
 
+            html.push('    <div class="img' + (item.vertical ? ' vertical' : '') + '">');
 
             html.push('      <img src="' + item.url + '?v=' + Date.now() + '">');
 
             html.push('      <img src="' + item.url + '?v=' + Date.now() + '">');
 
             html.push('    </div>');
 
             html.push('    </div>');
 
             html.push('    <div class="info">');
 
             html.push('    <div class="info">');
 
@@ -389,10 +401,10 @@ var app = {
 
 
 
             var img = new Image()
 
             var img = new Image()
 
             img.src = json.url + '?v=' + Date.now()
 
             img.src = json.url + '?v=' + Date.now()
 
-            img.onload = img.onerror = function(){
 
+            img.onload = img.onerror = function () {
 
                 app.showMask();
 
                 app.showMask();
 
                 var $view = $('.app-view')
 
                 var $view = $('.app-view')
 
-                if(img.width<img.height){
 
+                if (img.width < img.height) {
 
                     json.vertical = true
 
                     json.vertical = true
 
                     $view.addClass('vertical')
 
                     $view.addClass('vertical')
 
                 }
 
                 }
 
@@ -517,12 +529,20 @@ var app = {
 
                                 timer && clearTimeout(timer)
 
                                 timer && clearTimeout(timer)
 
                                 var json = JSON.parse(msg.data)
 
                                 var json = JSON.parse(msg.data)
 
                                 if (json.url) {
 
                                 if (json.url) {
 
+                                    console.log('获取图片成功');
 
+
 
+                                    // 新增内容
 
+                                    $('.myImg').attr('src', json.url)
 
+                                    $('.BAC').css('display', 'block')
 
+                                    $('.but').css('display', 'block')
 
+
 
+
 
+
 
                                     app.showView(json)
 
                                     app.showView(json)
 
                                 }
 
                                 }
 
                             } catch (error) {
 
                             } catch (error) {
 
                                 console.error(error)
 
                                 console.error(error)
 
                             }
 
                             }
 
-
 
                             break;
 
                             break;
 
                     }
 
                     }
 
                     app.is_send_msg = false
 
                     app.is_send_msg = false
 
@@ -624,9 +644,10 @@ window.onbeforeunload = function () {
 
     try {
 
     try {
 
         app.websocket.close();
 
         app.websocket.close();
 
         app.websocket = null;
 
         app.websocket = null;
 
-    } catch (ex) {}
 
+    } catch (ex) { }
 
 };
 
 };
 
 
 
+
 
 //app.showAlert('抱歉，因您长时间使用<br>让下一位小伙伴体验吧', 'timeout')
 
 //app.showAlert('抱歉，因您长时间使用<br>让下一位小伙伴体验吧', 'timeout')
 
 //app.showAlert('因您长时间未使用<br>已无法操作艺术照一体机', 'stop')
 
 //app.showAlert('因您长时间未使用<br>已无法操作艺术照一体机', 'stop')
 
 //app.showAlert('当前画屏正在被使用，请稍后', 'used')
 
 //app.showAlert('当前画屏正在被使用，请稍后', 'used')

File diff suppressed because it is too large
+ 20 - 0
static/js/html2canvas.js


+ 53 - 0
text.html
View File 

@@ -0,0 +1,53 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+
 
+<style>
 
+  #saveWrapX{
 
+    width: 100vw;
 
+    height: 100vh;
 
+    background: url('./static/images/bac/06.jpg') no-repeat center;
 
+    background-size: cover;
 
+  }
 
+  .save {
 
+    position: absolute;
 
+    bottom: 0;
 
+    left: 0;
 
+  }
 
+</style>
 
+<body>
 
+  <button class="save">保存</button>
 
+<div id="saveWrapX">
 
+  <div class="poster-container">
 
+    <img id="myIMG" src="https://img11.360buyimg.com/n1/jfs/t1/209176/2/871/189838/61431847E0250f26b/d1d0214bf4f39434.jpg" alt="">
 
+  </div>
 
+</div>
 
+</body>
 
+<script src="static/public/jquery.min.js"></script>
 
+
 
+<script src="./static/js/html2canvas.js"></script>
 
+
 
+<script>  
+//点击保存
 
+  $('.save').on('click', function (event) {
 
+    html2canvas(document.getElementById("saveWrapX"), {
 
+      // proxy:'http://fdart-huadong.oss-cn-shanghai.aliyuncs.com',
 
+      useCORS: true,
 
+      scale: 1
 
+    }).then(function (canvas) {
 
+      document.querySelector('.poster-container').appendChild(canvas);
 
+      let canvas1 = $('.poster-container canvas')
 
+      let posterImage = document.getElementById("myIMG")
 
+      posterImage.src = canvas1[0].toDataURL("image/jpg")
 
+    })
 
+
 
+  });
 
+  </script>
 
+
 
+</html>