|
...
|
...
|
@@ -22,6 +22,8 @@ Page({ |
|
|
|
is_join:false,
|
|
|
|
img_heights: [], //图片宽度
|
|
|
|
img_width: 750, //默认
|
|
|
|
show_canvas: false,
|
|
|
|
can_save:false,
|
|
|
|
},
|
|
|
|
//获取图片真实宽度
|
|
|
|
imageLoad: function (e) {
|
|
...
|
...
|
@@ -239,6 +241,7 @@ Page({ |
|
|
|
count:res.data.count,
|
|
|
|
is_send:res.data.is_send,//能否参加1：不能2：能
|
|
|
|
});
|
|
|
|
this.getLocalImage();
|
|
|
|
// self.countDown();
|
|
|
|
|
|
|
|
|
|
...
|
...
|
@@ -266,6 +269,7 @@ Page({ |
|
|
|
'detail.time': countDownArr,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
// this.drawCard();
|
|
|
|
}
|
|
|
|
// wx.hideLoading()
|
|
|
|
})
|
|
...
|
...
|
@@ -383,6 +387,233 @@ Page({ |
|
|
|
console.log('详情options', options);
|
|
|
|
this.setData({detail_id:+options.id?+options.id:''});
|
|
|
|
},
|
|
|
|
//点击分享
|
|
|
|
share() {
|
|
|
|
// this.drawCard();
|
|
|
|
console.log(this.data.can_save);
|
|
|
|
this.setData({can_save: false});
|
|
|
|
// wx.showLoading({title:'加载中',mask:true});
|
|
|
|
this.drawCard();
|
|
|
|
console.log(this.data.can_save);
|
|
|
|
// if(this.data.can_save) {
|
|
|
|
// wx.hideLoading({});
|
|
|
|
this.setData({show_canvas: true});
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
hideCanvasMask() {
|
|
|
|
// this.setData({show_canvas: true});
|
|
|
|
},
|
|
|
|
//关闭分享卡片
|
|
|
|
closeCanvas() {
|
|
|
|
this.setData({show_canvas: false});
|
|
|
|
// wx.navigateBack({delta:1})
|
|
|
|
},
|
|
|
|
//保存图片到手机相册
|
|
|
|
saveToPhone() {
|
|
|
|
this.getPower();
|
|
|
|
},
|
|
|
|
//图片链接转成本地路径
|
|
|
|
getLocalImage() {
|
|
|
|
const self = this;
|
|
|
|
wx.getImageInfo({
|
|
|
|
src: self.data.detail.banner[0],
|
|
|
|
success(res) {
|
|
|
|
console.log('图片链接转成本地路径',res);
|
|
|
|
self.setData({local_img:res.path})
|
|
|
|
self.drawCard()
|
|
|
|
console.log(res.width)
|
|
|
|
console.log(res.height)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
drawCard() {
|
|
|
|
console.log('开始画');
|
|
|
|
const self = this;
|
|
|
|
//先创建一个画布
|
|
|
|
const ctx = wx.createCanvasContext("canvas");
|
|
|
|
//填充背景色
|
|
|
|
ctx.fillStyle = '#fff';
|
|
|
|
ctx.fillRect(0, 0, 300, 150);
|
|
|
|
console.log(self.data.local_img);
|
|
|
|
//将图片转化为画布
|
|
|
|
ctx.drawImage(self.data.local_img, 0, 0, 330, 150);
|
|
|
|
console.log(111);
|
|
|
|
// ctx.drawImage("../../../../images/tou.png", 20, 166, 30, 30);//头像
|
|
|
|
// ctx.drawImage("../../../../images/code.jpg", 220, 209, 60, 60);//头像
|
|
|
|
//用户名字
|
|
|
|
ctx.setFontSize(13);
|
|
|
|
ctx.setFillStyle('#333333');
|
|
|
|
ctx.textAlign = "left";
|
|
|
|
console.log(111);
|
|
|
|
ctx.fillText(self.data.detail.userName, 69, 187);
|
|
|
|
ctx.restore();
|
|
|
|
//签到天数
|
|
|
|
ctx.setFontSize(17);
|
|
|
|
ctx.setFillStyle('#2C82E6');
|
|
|
|
ctx.fillText('连续', 25, 229);
|
|
|
|
ctx.restore();
|
|
|
|
ctx.setFillStyle('#2C82E6');
|
|
|
|
ctx.font = 'bold 22px sans-serif';
|
|
|
|
ctx.fillText(self.data.count, 63, 229);
|
|
|
|
ctx.restore();
|
|
|
|
ctx.setFontSize(17);
|
|
|
|
ctx.setFillStyle('#2C82E6');
|
|
|
|
ctx.font = 'normal 17px sans-serif';
|
|
|
|
ctx.fillText('天签到', 80, 229);
|
|
|
|
ctx.restore();
|
|
|
|
|
|
|
|
const text = self.data.detail.content;
|
|
|
|
// ctx.fillText('此处放文案此处放文案此处放文案此处放文案此处放文案此处放文案此处放文案', 25, 252,200);
|
|
|
|
// ctx.restore();
|
|
|
|
var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
|
|
|
|
var temp = "";
|
|
|
|
var row = [];
|
|
|
|
ctx.setFontSize(13);
|
|
|
|
ctx.setFillStyle('#333333');
|
|
|
|
for (var a = 0; a < chr.length; a++) {
|
|
|
|
if (ctx.measureText(temp).width < 170) {
|
|
|
|
temp += chr[a];
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
|
|
|
|
row.push(temp);
|
|
|
|
temp = "";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
row.push(temp);
|
|
|
|
|
|
|
|
//如果数组长度大于2 则截取前两个
|
|
|
|
if (row.length > 2) {
|
|
|
|
var rowCut = row.slice(0, 2);
|
|
|
|
var rowPart = rowCut[1];
|
|
|
|
var test = "";
|
|
|
|
var empty = [];
|
|
|
|
for (var a = 0; a < rowPart.length; a++) {
|
|
|
|
if (ctx.measureText(test).width < 170) {
|
|
|
|
test += rowPart[a];
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
empty.push(test);
|
|
|
|
var group = empty[0] + "...";//这里只显示两行，超出的用...表示
|
|
|
|
rowCut.splice(1, 1, group);
|
|
|
|
row = rowCut;
|
|
|
|
}
|
|
|
|
for (var b = 0; b < row.length; b++) {
|
|
|
|
ctx.fillText(row[b], 25, 252 + b * 16, 170);
|
|
|
|
}
|
|
|
|
ctx.restore();
|
|
|
|
|
|
|
|
// ctx.drawImage("../../../../images/home-banner.png", 0, 0, 250, 150)
|
|
|
|
//成功执行，draw方法中进行回调
|
|
|
|
ctx.draw(true, function () {
|
|
|
|
// wx.hideLoading();
|
|
|
|
console.log("draw callback success");
|
|
|
|
self.setData({can_save: true,show_canvas: true});
|
|
|
|
console.log(self.data.can_save);
|
|
|
|
})
|
|
|
|
},
|
|
|
|
//获取保存到相册的权限
|
|
|
|
getPower() {
|
|
|
|
const that = this;
|
|
|
|
//保存临时图片
|
|
|
|
wx.getSetting({
|
|
|
|
success(res) {
|
|
|
|
if (!res.authSetting['scope.writePhotosAlbum']) {
|
|
|
|
wx.authorize({
|
|
|
|
scope: 'scope.writePhotosAlbum',
|
|
|
|
success() { //这里是用户同意授权后的回调
|
|
|
|
that.savePic();
|
|
|
|
},
|
|
|
|
fail() { //这里是用户拒绝授权后的回调
|
|
|
|
wx.showModal({
|
|
|
|
title: '提示',
|
|
|
|
content: '若不打开授权，则无法将图片保存在相册中！',
|
|
|
|
showCancel: true,
|
|
|
|
cancelText: '暂不授权',
|
|
|
|
cancelColor: '#000000',
|
|
|
|
confirmText: '去授权',
|
|
|
|
confirmColor: '#3CC51F',
|
|
|
|
success: function (res) {
|
|
|
|
if (res.confirm) {
|
|
|
|
wx.openSetting({
|
|
|
|
//调起客户端小程序设置界面，返回用户设置的操作结果。
|
|
|
|
success: function (ret) {
|
|
|
|
if (ret.authSetting["scope.writePhotosAlbum"] == true) {
|
|
|
|
wx.showToast({
|
|
|
|
title: '授权成功',
|
|
|
|
icon: 'none',
|
|
|
|
duration: 1000
|
|
|
|
});
|
|
|
|
//再次授权，保存到相册
|
|
|
|
that.savePic();
|
|
|
|
} else {
|
|
|
|
wx.showToast({
|
|
|
|
title: '授权失败',
|
|
|
|
icon: 'none',
|
|
|
|
duration: 1000
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
wx.showToast({
|
|
|
|
title: '授权失败',
|
|
|
|
icon: 'none',
|
|
|
|
duration: 1000
|
|
|
|
})
|
|
|
|
// console.log('用户点击取消')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
})
|
|
|
|
} else { //用户已经授权过了
|
|
|
|
console.log('用户已经授权过了')
|
|
|
|
that.savePic();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
savePic() {
|
|
|
|
if(this.data.can_save) {
|
|
|
|
wx.canvasToTempFilePath({
|
|
|
|
x: 0,
|
|
|
|
y: 0,
|
|
|
|
width: 300,
|
|
|
|
height: 300,
|
|
|
|
destWidth: 300,
|
|
|
|
destHeight: 300,
|
|
|
|
canvasId: 'canvas',
|
|
|
|
fileType: 'jpg',
|
|
|
|
quality:1,
|
|
|
|
success: function (res) {
|
|
|
|
console.log("get tempfilepath(success) is:", res.tempFilePath);
|
|
|
|
//将图片保存在系统相册中(应先获取权限，)
|
|
|
|
wx.saveImageToPhotosAlbum({
|
|
|
|
filePath: res.tempFilePath,
|
|
|
|
success(res) {
|
|
|
|
wx.showToast({title:'保存成功',icon:'none'});
|
|
|
|
console.log("save photo is success")
|
|
|
|
},
|
|
|
|
fail: function () {
|
|
|
|
wx.showToast({title:'保存失败',icon:'none'});
|
|
|
|
console.log("save photo is fail")
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
fail: function () {
|
|
|
|
console.log('get tempfilepath is fail')
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}else {
|
|
|
|
wx.showLoading({title:'加载中',icon:'loading',duration:1000})
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
onShareAppMessage: function() {
|
|
|
|
let self = this;
|
|
|
|
// 设置菜单中的转发按钮触发转发事件时的转发内容
|
...
|
...
|
|
