|
|
@@ -17,14 +17,14 @@
|
|
|
<style>
|
|
|
.BAC {
|
|
|
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;
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- display: block;
|
|
|
+ display: none;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
@@ -35,56 +35,127 @@
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
}
|
|
|
+
|
|
|
.BAC_son img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
- .but{
|
|
|
+
|
|
|
+ .but {
|
|
|
z-index: 1000;
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
- bottom: 40px;
|
|
|
+ bottom: 50px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
width: 70%;
|
|
|
height: 40px;
|
|
|
+ display: none;
|
|
|
}
|
|
|
+
|
|
|
.but img {
|
|
|
height: 100%;
|
|
|
}
|
|
|
- .box{
|
|
|
+
|
|
|
+ .but img:nth-of-type(2) {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
height: 85%;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
- .BAC_son .arrows{
|
|
|
+
|
|
|
+ .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">
|
|
|
+ <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 src="./static/images/adds/33.png" alt="">
|
|
|
+ <img class="myImg" src="" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="but">
|
|
|
<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>
|
|
|
|
|
|
|
|
|
@@ -155,7 +226,7 @@
|
|
|
<a class="btn-link" href="javascript:;">刷新页面</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="app-view">
|
|
|
+ <div class="app-view mybox">
|
|
|
<div class="img"></div>
|
|
|
<div class="tip">
|
|
|
<div>
|
|
|
@@ -238,14 +309,15 @@
|
|
|
<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 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;
|
|
|
$('.box').on('touchstart', function (e) {
|
|
|
@@ -258,62 +330,99 @@
|
|
|
|
|
|
$('.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;
|
|
|
_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) 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("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;
|
|
|
+ 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);
|
|
|
- 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)
|
|
|
// 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>
|
|
|
|
|
|
</html>
|
