图片模板合成

1、将图片坐标宽高算出来

2、因为模板有多变形，图片又无法裁剪多边形，要操作图片又要在模板上边，解决方案用1,2,1模式，图片->模板->图片，真正操作的是最上边一层图片，透明度为opacity

0,最上层图片改变的transform属性赋值给最底层，即实现了多边形用模板

3、图片放大缩小，移动运用alloyfinger插件，移动用点击事件，点击交换两个数组位置，替换两个图片的src

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

<link rel="stylesheet" href="css/reset.css">

<link rel="stylesheet" href="css/index.css">

<title></title>

</head>

<body>

<!-- 加载中 -->

<div class="move" id="move">

<img src="./image/move.gif" alt="">

<p>加载中</p>

</div>

<!-- 遮罩 -->

<div class="zindex" style="display: none;">

<div class="title">小提示</div>

<div class="Instruction">

<div class="ins">

<img src="./image/fina1.png" alt="">

单指移动

</div>

<div class="ins">

<img src="./image/fina2.png" alt="">

双指放大缩小

</div>

<div class="ins">

<img src="./image/fina3.png" alt="">

点击图片可互换位置

</div>

<div class="ins">

<img style="width: 32px;height:32px" src="./image/reset.png" alt="">

可点击重置或右上角编辑可重新编辑

</div>

</div>

<button class="know">我知道了</button>

</div>

<!-- <p class="edit">单指移动，双指放大缩小，点击图片可互换位置</p> -->

<img id="bianji" style="display: none" class="bianji" src="./image/photoEdit.png" alt="">

<img id="niceImg" src="" alt="" style="display: none">

<!-- 模板 -->

<div class="all" id="all">

</div>

<div class="notice">温馨提醒：图片合成完成，可点击图片长按保存至本地！</div>

<div class="buttons">

<div class="button" id="click" onclick="finish()">图片合成</div>

<div class="button" id="reset">重置</div>

</div>

<div id="toast" class="toast" style="display: none"></div>

<style>

body{

overflow-x:hidden;

}

.move{

background: rgba(0,0,0,0.8);

margin: 0 auto;

width: 180px;

height: 180px;

position: absolute;

z-index: 6;

top: 40%;

left: 50%;

-webkit-transform: translate(-50%,-50%);

-ms-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

border-radius: 20px;

}

.move img{

margin: 0 auto;

width: 80px;

height: 80px;

position: absolute;

z-index: 6;

top: 40%;

left: 50%;

-webkit-transform: translate(-50%,-50%);

-ms-transform: translate(-50%,-50%);

transform: translate(-50%,-50%)

}

.move p{

margin: 0 auto;

width: 80px;

height: 30px;

position: absolute;

text-align: center;

z-index: 6;

top: 70%;

left: 50%;

-webkit-transform: translate(-50%,-50%);

-ms-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

color: #fff;

font-size: 20px;

}

.toast{

background: rgba(0, 0, 0, .8);

color: #fff;

/* width: auto; */

line-height: 32px;

border-radius: 10px;

padding: 0 10px;

position: absolute;

z-index: 99;

top: 50%;

left: 50%;

font-size: .26rem;

-webkit-transform: translate(-50%,-50%);

-ms-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

}

.zindex{

font-size: .3rem;

width: 7.5rem;

background:rgba(0, 0, 0, .8);

height: 100vh;

position: absolute;

top: 0;

z-index: 96;

}

.title{

text-align: center;

z-index: 99;

color: #fff;

padding: .6rem 0;

}

.Instruction{

text-align: left;

z-index: 99;

color: #fff;

padding-left: 1rem;

padding-right: 0.1rem;

}

.ins{

padding: .3rem 0;

}

.ins img{

width: 40px;

height: 40px;

vertical-align: middle;

position: relative;

top:-4px;

}

.know{

border: 1px solid #fff;

border-radius: 10px;

width: 120px;

height: 40px;

margin: 1rem auto 0;

color: #fff;

display: block;

}

#niceImg{

margin: 1rem auto 0.5rem;

}

.bianji{

width: 30px;

height: 30px;

padding: 10px;

cursor: pointer;

position: absolute;

right: 0;

top: 0;

}

.edit{

width: 7.5rem;

font-size: .25rem;

padding: .2rem;

margin: 0;

color:#626262;

}

.all{

margin: 1rem auto 0.5rem;

width: 7.5rem;

height:6.1rem;

border:2px solid #e8ecff;

border-radius:16px;

box-shadow:5px 5px 5px 5px #e8ecff;

box-sizing: border-box;

position: relative;

z-index: 1;

overflow: hidden;

}

.shucai{

position: absolute;

top: 0;

left: 0;

width: 7.5rem;

height:6.1rem;

}

.bottomImg{

z-index: 2;

transform: none!important;

text-align: center;

display: table-cell;

vertical-align: middle;

}

.thumb{

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

z-index: 4;

}

.opacity{

opacity: 0;

z-index: 6;

}

.buttons{

width: 90%;

display: flex;

justify-content: space-between;

margin:1rem auto;

}

.button{

font-size: .3rem;

background:#ff999a;

border:1px solid #ff999a;

width:2.5rem;

height:.6rem;

line-height:.6rem;

border-radius:.3rem;

padding:0 .2rem;

color:#fff;

text-align:center;

cursor:pointer;

}

.box{

width: 100%;

height: inherit;

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

z-index: 4;

/* background: url('./image/1.png') no-repeat;

background-size: 100% 100%; */

}

.img{

overflow: hidden;

/* border:1px solid #f3f; */

overflow:hidden;

z-index: 6;

transform:none!important;

text-align: center;

display: table-cell;

vertical-align: middle;

}

.imgs,.rotel{

overflow: hidden!important;

}

.rotateImg,.rotateNice{

/* z-index: 3; */

max-width: 100%;

max-height: 100%;

}

.checked{

width: 20px;

height: 20px;

border: 1px solid #626262;

background: #fff;

border-radius: 100%;

position: absolute;

right: 10px;

top: 10px;

z-index: 6;

display: none;

}

.checked.active{

width: 20px;

height: 20px;

border: 1px solid #626262;

background:#4b94f2;

display: block;

}

.notice{

font-size: .3rem;

text-align: left;

padding: 0 .2rem;

color:#626262;

}

</style>

<script src="js/jquery-1.12.2.min.js"></script>

<!-- console.log后边去掉 -->

<script src="js/vconsole.min.js"></script>

<!-- rem -->

<!-- <script src="js/index.js"></script> -->

<!-- weixin -->

<script src="js/jweixin-1.2.0.js"></script>

<!-- alloy_finger放大缩小插件 -->

<script src="js/transform.js"></script>

<script src="js/alloy_finger.js"></script>

<!-- 合成图片 -->

<script src="js/dom-to-image.js"></script>

<script>

//document.body.style.overflow='hidden';//手机版设置这个。

//https://friend-guess.playonwechat.com/v5/photo/append-photo?sign=ea351f20b3a99eeacb558494bd3ac48a&operator_id=4321&pw_id=111859&position=1&

//picture=https%3A%2F%2Fg-cdn.zealcdn.cn%2Fimages%2F4321936%2F20180508%2Fb9e70ca92532a0e90c275f7013a5dc38

// 弹窗

setTimeout(function(){

$("#move").hide();

},2000)

console.log(localStorage.getItem("know"));

if(localStorage.getItem("know")){

$('.zindex').hide();

}else{

$('.zindex').show();

}

let apiurl = 'https://friend-guess.playonwechat.com/';

let kid = ""; //4321

let sign = ""; //ea351f20b3a99eeacb558494bd3ac48a

let list = [];

let pw_id = '';//照片墙111857

let temp_id = ''//模板382

let height = '';//图片高度 1500

let thumb = '';//封面 https://friend-guess.playonwechat.com/assets/template_thumb/120520180427183233.jpg

let longTap = false;//长按

let timeOutEvent = 0;//定时器

let idNum ='';

let moveImageIndex = '';

let index = '';

var nicePhoto = '';

var nicePhotos =[];

let moveEnds = false;

let arrActive = [];//选中数组

let save = false; //生成图片

let ratio = '';

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

console.log(`clientWidth ${clientWidth}`);

ratio = docEl.clientWidth/750;

if (!clientWidth) return;

if(clientWidth>=750){

docEl.style.fontSize = '100px';

}else{

docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

console.log(`${100 * (clientWidth / 750)} 'px', `)

}

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

(function(){

var _href = decodeURIComponent(window.location.href);

console.log(_href);

function GetRequest() {

var url = location.search; //获取url中"?"符后的字串;

// var url = '?thumb=./image/photoEdit.png&sign=ea351f20b3a99eeacb558494bd3ac48a&kid=4321&height=750&pw_id=112941&temp_id=394&nicePhoto=https://g-cdn.zealcdn.cn/images/4321936/20180511/a013772592dee6f64bb4a2ce34af1488';

console.log('url',url);

var theRequest = new Object();

if (url.indexOf("?") != -1) {

var str = decodeURIComponent(url.substr(1));

strs = str.split("&");

for (var i = 0; i < strs.length; i++) {

theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);

}

}

return theRequest;

}

var Request = new Object();

Request = GetRequest();

kid = Request['kid'];

sign = Request['sign'];

pw_id = Request['pw_id'];

height = Request['height']/100;

thumb = Request['thumb'];

temp_id = Request['temp_id'];

nicePhoto = Request['nicePhoto'];

nicePhotos=nicePhoto.split(","); //字符分割

console.log('nicePhotos',nicePhotos);

localStorage.setItem("kid", kid);

localStorage.setItem("sign", sign);

localStorage.setItem("pw_id", pw_id);

console.log(

`

页面参数：

thumb:${thumb},

temp_id:${temp_id},

kid:${kid},

list:${list},

sign:${sign},

pw_id:${pw_id},

height:${height},

nicePhoto:${nicePhoto},

nicePhotos:${nicePhotos},

`

);

// thumb = 'https://g-cdn.zealcdn.cn/images/photowall/4321112949/20180511/822adff52ab79114a1d21c5a9e1c0be6?v=1.0.0.1?0.49626290683090013?imageslim';

console.log('height:194行',height);

document.getElementById('all').style.height = ""+height+"rem";

// document.getElementById('all').style.backgroundImage = "url("+thumb+")";

// document.getElementById('all').style.backgroundRepeat = "no-repeat";

// document.getElementById('all').style.backgroundSize = "100% 100%";

})();

if(!sign){

sign= sessionStorage.getItem("sign");

kid= sessionStorage.getItem("kid");

}

if(temp_id){

$.ajax({ //模板详情

type:"get",

url : apiurl+'/v5/photo/template-info?sign='+sign+'&operator_id='+ kid,

data: {

temp_id: temp_id

},

dataType : 'json',

success : function(res){

console.log('模板详情res:',res);

console.log('source_effect:',res.data.source_effect);

var source_effect = [];

for (var i in res.data.source_effect) {

source_effect.push(res.data.source_effect[i]); //值

}

console.log(`source_effect,${source_effect.length},${source_effect}`);

source_effect.forEach((data, index) => {

var shuju = data[0].split('x');

var shuju2 = data[1].split('x');

var both = {};

both.width = shuju[0] / 100;

both.height = shuju[1] / 100;

both.x = shuju2[0] / 100;

both.y = shuju2[1] / 100;

both.src = nicePhotos[index];

list[index] = both; //将多个both对象pushgouwu数组

})

// thumb = 'https://friend-guess.playonwechat.com/assets/template_thumb/5af6a5cbc784a6043.png'

// list = [

// {width: 2.78, height: 3.15, x: 4.35, y: 4.83, src: "https://g-cdn.zealcdn.cn/images/4321936/20180514/d2f75fc30304f5606864bcbd9464b5f0"},

// {width: 5.15, height: 4.72, x: 0.12, y: 0.11, src: "https://g-cdn.zealcdn.cn/images/4321936/20180514/7f89a5a6a528b823e3e0da51880bf8a3"},

// {width: 2.89, height: 2.78, x: 0, y: 4.83, src: "https://g-cdn.zealcdn.cn/images/4321936/20180514/5d84108a1fbf48bcc6d5f0ff5f885591"},

// {width: 2.16, height: 1.91, x: 5.27, y: 2.87, src: "https://g-cdn.zealcdn.cn/images/4321936/20180514/367ed17469dc9cb357b849671647f157"}

// ]

console.log('list:', list);

var informArr="";

// <div id="shucai${[i]}" class="shucai"><div>

for(var i=0;i< list.length;i++){

var informStr=(`

<div class="bottomImg img${[i]}"

style="overflow:hidden;position:absolute;left:${list[i].x +'rem'};top:${list[i].y + 'rem'};width:${list[i].width +'rem'}; height:${list[i].height + 'rem'} ">

<img class="rotateNice rotateImg${[i]}" src="${list[i].src}">

</div>

<div class="img img${[i]}" id="img${[i]}" onclick="checked('${[i]}')"

style="overflow:hidden;position:absolute;left:${list[i].x +'rem'};top:${list[i].y + 'rem'};width:${list[i].width +'rem'}; height:${list[i].height + 'rem'} ">

<span class="checked rol${[i]}" id="rol${[i]}" ></span>

<img id="rotateImg${[i]}" class="opacity rotateImg rotateImg${[i]}" src="${list[i].src}">

</div>

`);

informArr+=informStr;

}

document.getElementById("all").innerHTML='<div class="thumb" id="thumb"></div>'+informArr;

setTimeout(()=>{

document.getElementById('thumb').style.backgroundImage = "url("+thumb+")";

document.getElementById('thumb').style.backgroundRepeat = "no-repeat";

document.getElementById('thumb').style.backgroundSize = "100% 100%";

},1000)

var len = document.querySelectorAll('.rotateImg');

for(let i=0,l=len.length;i<l;i++){

let img = document.getElementById(len[i].id);

console.log('放大缩小：',len[i].id);

Transform(img);

new AlloyFinger('#'+ len[i].id, {

// rotate:function(evt){ //旋转

// img.rotateZ += evt.angle;

// let nowid1 = evt.target.id.charAt(evt.target.id.length-1,1);

// console.log('nowid2:','#rotateImg'+nowid2);

// console.log(`${getComputedStyle(document.getElementById('rotateImg'+nowid1))}`);

// let style = getComputedStyle(document.getElementById('rotateImg'+nowid1)).transform;

// $('.rotateImg'+nowid1).css({

// 'transform':style

// })

// // let style = getComputedStyle(nowid1);

// // console.log('style:',style);

// },

multipointStart: function (evt) {

console.log('multipointStart',evt);

timeOutEvent = setTimeout("longPress()",500)

initScale = img.scaleX;

let nowid2 = evt.target.id.charAt(evt.target.id.length-1,1);

console.log('nowid2:','#rotateImg'+nowid2);

console.log(`${getComputedStyle(document.getElementById('rotateImg'+nowid2))}`);

let style = getComputedStyle(document.getElementById('rotateImg'+nowid2)).transform;

$('.rotateImg'+nowid2).css({

'transform':style

})

},

pinch: function (evt) { //放大缩小

console.log('pinch',evt);

// document.querySelectorAll('.img').style.transform='';

$('.img').css('transform','')

img.scaleX = img.scaleY = initScale * evt.zoom;

let nowid3 = evt.target.id.charAt(evt.target.id.length-1,1);

console.log('nowid3:','#rotateImg'+nowid3);

console.log(`${getComputedStyle(document.getElementById('rotateImg'+nowid3))}`);

let style = getComputedStyle(document.getElementById('rotateImg'+nowid3)).transform;

$('.rotateImg'+nowid3).css({

'transform':style

})

console.log('style:',style);

},

pressMove:function(evt){

console.log('evt111',evt);

img.translateX += evt.deltaX;

img.translateY += evt.deltaY;

evt.preventDefault();

let nowid4 = evt.target.id.charAt(evt.target.id.length-1,1);

console.log('nowid4:','#rotateImg'+nowid4);

let style = getComputedStyle(document.getElementById('rotateImg'+nowid4)).transform;

$('.rotateImg'+nowid4).css({

'transform':style

})

console.log('style:',style);

}

});

}

var len2 = document.querySelectorAll('.img');

console.log(len2,'len2');

for(let i=0,l=len2.length;i<l;i++){

let img2 = document.getElementById(len2[i].id);

Transform(img2);

new AlloyFinger('#'+ len2[i].id, {

multipointStart: function (evt) {

console.log('multipointStart',evt);

timeOutEvent = setTimeout("longPress()",500)

initScale = img2.scaleX;

},

longTap: function (evt) {

console.log('longTap');

let x = evt.changedTouches[0].clientX;

let y = evt.changedTouches[0].clientY;

console.log('长按移动pressMove',evt,x,y);

//evt.target.id

idNum = evt.target.id.charAt(evt.target.id.length-1,1);

moveImageIndex = evt.target.id.charAt(evt.target.id.length-1,1);

// alert(idNum);

$('.img').css('z-index','4');

moveEnds = true;

img2.translateX += evt.deltaX;

img2.translateY += evt.deltaY;

evt.preventDefault();

// e.stopPropagation();

},

doubleTap: function (evt) {

console.log('doubleTap',evt.target.id.charAt(evt.target.id.length-1,1));

let nowId = evt.target.id.charAt(evt.target.id.length-1,1);

// alert(list[nowId].x);

document.getElementById("rotateImg"+nowId+"").style.left=list[nowId].x+"rem";

document.getElementById("rotateImg"+nowId+"").style.top=list[nowId].y+"rem";

document.getElementById("img"+nowId+"").style.width=list[nowId].width+"rem";

document.getElementById("img"+nowId+"").style.height=list[nowId].height+"rem";

},

pressMove:function(evt){ //移动

},

touchEnd: function (evt) {

console.log('touchEnd:');

let x = evt.changedTouches[0].clientX/ratio;

let y = evt.changedTouches[0].clientY/ratio;

},

})

}

function isPointInPath (x0, y0, x, y, w, h) {

if (x0 >= x && x0 <= x + w && y0 >= y && y0 <= y + h) {

return true;

} else {

return false;

}

}

},

error:function(e){

console.log(e);

}

})

}

function editTap(){

$('.checked').css('display','block');

}

$('.know').click(function() {

$(".zindex").hide();

localStorage.setItem("know", true);

})

function checked(id){

console.log('checked:',id);

if($("#rol"+id+"").hasClass('active')){

$("#rol"+id+"").removeClass('active');

// 移除数组中的某项

for(let k=0;arrActive.length;k++){

if(arrActive[k]==id){

arrActive.splice(k,1)

}

}

arrActive;

console.log(`arrActive,${arrActive}`)

}else{

$("#rol"+id+"").addClass('active');

arrActive.push(id);

console.log(id,arrActive,633);

if(arrActive.length>1){

i = arrActive[0];

moveImageIndex = arrActive[1];

// 1

// 子 rotateImg

console.log('x:',list[i].src);

console.log('x:',list[moveImageIndex].src);

document.getElementById("img"+i+"")

console.log($('.rotateImg'+i)[0].src)

$('.rotateImg'+i).attr('src',list[moveImageIndex].src);

$('.rotateImg'+moveImageIndex).attr('src',list[i].src);

$('#rotateImg'+i).attr('src',list[moveImageIndex].src);

$('#rotateImg'+moveImageIndex).attr('src',list[i].src);

console.log($('.rotateImg'+i)[0].src)

console.log($('.rotateImg'+moveImageIndex)[0].src)

// 重置

arrActive = [];

console.log('arrActive:',arrActive);

$('.checked').removeClass('active');

}

}

}

function longPress(event){

console.log('longPress');

longTap = true;

}

// 合成图片

function finish(){

// alert(save,111);

var node = document.getElementById('all');

var img = document.getElementById('niceImg');

console.log('save511合成图片',save);

if(save){ //编辑才可再保存

}else{

// toSvg

domtoimage.toSvg(node)

.then(function (dataUrl) {

img.src = dataUrl;

document.getElementById('niceImg').style.display='block';

document.getElementById('bianji').style.display='block';

document.getElementById('all').style.display='none';

document.getElementById('toast').innerHTML='可长按图片保存至本地哦';

document.getElementById('toast').style.display='block';

setTimeout(function(){

document.getElementById('toast').style.display='none';

},2000)

})

.catch(function (error) {

console.error('oops, something went wrong!', error);

});

}

}

$('#reset').click(function(){

location.reload()

})

$('#bianji').click(function() {

$("#all").show();

$("#niceImg").hide();

save = false;

console.log('save542',save);

document.getElementById('toast').innerHTML='可以编辑图片了哦！';

document.getElementById('toast').style.display='block';

setTimeout(function(){

document.getElementById('toast').style.display='none';

},2000)

})

//返回小程序

$(document).on('click', '#backHome', function() {

wx.miniProgram.navigateTo({ url: 'pages/demo/demo' })

})

</script>

</body>

</html>