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
>