chenzhiguang
/
SZGD


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
							<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover" />
  <title>回望江南—苏州老照片展</title>
  <link rel="stylesheet" type="text/css" href="static/public/animate.min.css" />
  <link rel="stylesheet" type="text/css" href="static/public/swiper-4.3.5.min.css" />
  <link rel="stylesheet" type="text/css" href="static/css/app.css" />
  <script src="static/public/flexible.min.js" async></script>
  <style>
    .BAC {
      z-index: 999;
      background: url('./static/images/bac/06.jpg') no-repeat center;
      background-size: cover;
      width: 100vw;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      overflow: hidden;
    }

    .BAC_son {
      width: 140px;
      max-width: 240px;
      min-width: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .BAC_son img {
      width: 100%;
      height: 100%;
    }

    .but {
      z-index: 1000;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 50px;
      display: flex;
      justify-content: space-between;
      width: 70%;
      height: 40px;
      display: none;
    }

    .but img {
      height: 100%;
    }

    .but img:nth-of-type(2) {
      float: right;
    }

    .box {
      position: absolute;
      width: 100%;
      height: 85%;
      bottom: 0;
      left: 0;
    }

    .BAC_son .arrows {
      position: absolute;
      right: 0;
      top: 0;
      width: 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>
</head>

<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" id="saveWrapX">
    <img class="watermark" src="./static/images/adds/watermark.png" alt="">
    <div class="BAC_son">
      <img class="arrows" src="./static/images/adds/fangda.png" alt="">
      <div class="box">
      </div>
      <img class="myImg" src="" alt="">
    </div>
  </div>
  <div class="but">
    <img class="cancel" src="./static/images/adds/22.png" alt="">
    <img class="save" src="./static/images/adds/11.png" alt="">
  </div>


  <div class="app-main">
    <div class="ads-swiper swiper-container">
      <div class="swiper-wrapper"></div>
      <div class="swiper-pagination"></div>
    </div>
    <nav class="nav-menu">
      <ul>
        <li><a href="javascript:;" class="btn-pic-take"></a></li>
        <li><a href="javascript:;" class="btn-pic-list"></a></li>
      </ul>
    </nav>
  </div>
  <div class="app-switch">
    <nav class="swt-style clearfix">
      <a href="javascript:;" data-id='1' class="switch active"></a>
      <div></div>
    </nav>
    <div class="stl-swiper swiper-container">
      <div class="swiper-wrapper">
        <div data-msg="1" class="swiper-slide style-1"></div>
        <div data-msg="2" class="swiper-slide style-2"></div>
        <div data-msg="3" class="swiper-slide style-3"></div>
        <div data-msg="4" class="swiper-slide style-4"></div>
        <div data-msg="5" class="swiper-slide style-5"></div>
        <div data-msg="6" class="swiper-slide style-6"></div>
      </div>
    </div>
  </div>
  <div class="my-pic-list">
    <header>
      <div class="home-nav">
        <a class="btn-back"></a>
      </div>
      <div class="tips">
        相片将于您退出后删除，请尽快保存
      </div>
    </header>
    <article>
      <div class="pic-swiper swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <!-- <div class="img">
              <img src="static/images/test.png">
            </div>
            <div class="info">
              <div class="time">
                2010年10月10日 18:00:00
              </div>
              <div class="style style-1"></div>
            </div> -->
          </div>
        </div>
        <div class="swiper-scrollbar"></div>
      </div>
    </article>
  </div>

  <!-- 点击拍照之后的原显示页面 -->
  <div class="app-mask"></div>
  <div class="app-alert">
    <div class="tips"></div>
    <div class="btns">
      <a class="btn-use" href="javascript:;">再次使用</a>
      <a class="btn-link" href="javascript:;">刷新页面</a>
    </div>
  </div>
  <div class="app-view mybox">
    <div class="img"></div>
    <div class="tip">
      <div>
        <div>长按图片保存</div>
        <div>关闭后可在【我的相片】中查看</div>
      </div>
      <span class="close"></span>
    </div>
  </div>


  <div class="app-action-tips">
    <div class="content loading">
      <div class="lds-spinner">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="tips"></div>
    </div>
    <div class="content loading-switch">
      <div class="lds-spinner">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="tips">正在切换画风</div>
    </div>
    <div class="content face-6">
      <div class="tips">
        将于1秒后拍摄
      </div>
    </div>
    <div class="content face-5">
      <div class="tips">
        将于2秒后拍摄
      </div>
    </div>
    <div class="content face-4">
      <div class="tips">
        将于3秒后拍摄
      </div>
    </div>
    <div class="content face-3">
      <div class="tips">
        将于4秒后拍摄
      </div>
    </div>
    <div class="content face-2">
      <div class="tips">
        将于5秒后拍摄
      </div>
    </div>
    <div class="content face-1">
      <div class="tips">
        快望向你身前的艺术<br>照设备，准备拍照啦
      </div>
    </div>
  </div>
  <script src="static/public/swiper-4.3.5.min.js"></script>
  <script src="static/public/jquery.min.js"></script>
  <script src="static/js/config.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="./static/js/html2canvas.js"></script>
</body>
<script>
  // 获取最大盒子的宽高
  let BACwidth = $('.BAC').width()
  let BACheight = $('.BAC').height()
  // 初始盒子的位移
  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;
  $('.box').on('touchstart', function (e) {
    _x_start = e.touches[0].pageX;
    _y_start = e.touches[0].pageY;
    // console.log("start",_x_start)
    left_start = $('.BAC_son').css("left");
    top_start = $('.BAC_son').css("top");
  })

  $('.box').on('touchmove', function (e) {
    //获取当前盒子的宽高
    let BACSonWidth = $('.BAC_son').width()
    let BACSonHeight = $('.BAC_son').height()

    _x_move = e.touches[0].pageX;
    _y_move = e.touches[0].pageY;
    // 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 + 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("top", myTop + "px");
    // console.log(parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start));
  })
  $('.box').on('touchend', function (e) {
    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('按住了');
  })

  $('.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);
    // 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() $('.BAC_son').css('height',BACSonWidth-3)
    // else $('.BAC_son').css('height',BACSonHeight+3)
  })


  // 点击取消
  $('.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>

</html>