|
@@ -162,8 +162,25 @@ Page({
|
|
|
const systemInfo = wx.getSystemInfoSync();
|
|
|
return rpx * (systemInfo.windowWidth / 750);
|
|
|
},
|
|
|
+ getImageInfo(url) {
|
|
|
+ console.log(url);
|
|
|
+ return new Promise((result) => {
|
|
|
+ wx.getImageInfo({
|
|
|
+ src: url, //服务器返回的图片地址
|
|
|
+ success: function (res) {
|
|
|
+ // res.path是网络图片的本地地址
|
|
|
+ let Path = res.path;
|
|
|
+ result(Path)
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ console.log(err);
|
|
|
+ result()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
//rpx
|
|
|
- saveImage() {
|
|
|
+ async saveImage() {
|
|
|
// console.log('运行了');
|
|
|
const canvas = wx.createCanvasContext('myCanvas');
|
|
|
const width = this.rpxToPx(670);
|
|
@@ -176,119 +193,107 @@ Page({
|
|
|
canvas.setFillStyle('#CAE1FD'); // 背景色
|
|
|
canvas.fillRect(0, 0, width, height);
|
|
|
canvas.setFillStyle('#0178EE');
|
|
|
+ let mainimage = await this.getImageInfo(this.data.randomImage)
|
|
|
+ let avatar = Parse.User.current()?.get('avatar')
|
|
|
+ console.log('avatar', avatar);
|
|
|
+ let userAvatar = await this.getImageInfo(avatar)
|
|
|
+ console.log('userAvatar', userAvatar);
|
|
|
+ //主图片
|
|
|
+ canvas.drawImage(mainimage, 0, 0, width, this.rpxToPx(500)); // 调整图片高度
|
|
|
+ //头像
|
|
|
+ if (userAvatar) {
|
|
|
+ // 绘制带圆角的头像
|
|
|
+ const avatarX = this.rpxToPx(40);
|
|
|
+ const avatarY = this.rpxToPx(540);
|
|
|
+ const avatarSize = this.rpxToPx(83);
|
|
|
+ const radius = avatarSize / 2; // 半径为头像大小的一半
|
|
|
+
|
|
|
+ // 绘制圆角矩形
|
|
|
+ canvas.save(); // 保存当前状态
|
|
|
+ canvas.beginPath(); // 开始路径
|
|
|
+ canvas.moveTo(avatarX + radius, avatarY); // 左上角
|
|
|
+ canvas.lineTo(avatarX + avatarSize - radius, avatarY); // 上边
|
|
|
+ canvas.arc(avatarX + avatarSize - radius, avatarY + radius, radius, 1.5 * Math.PI, 0, false); // 右上角
|
|
|
+ canvas.lineTo(avatarX + avatarSize, avatarY + avatarSize - radius); // 右边
|
|
|
+ canvas.arc(avatarX + avatarSize - radius, avatarY + avatarSize - radius, radius, 0, 0.5 * Math.PI, false); // 右下角
|
|
|
+ canvas.lineTo(avatarX + radius, avatarY + avatarSize); // 下边
|
|
|
+ canvas.arc(avatarX + radius, avatarY + avatarSize - radius, radius, 0.5 * Math.PI, Math.PI, false); // 左下角
|
|
|
+ canvas.lineTo(avatarX, avatarY + radius); // 左边
|
|
|
+ canvas.arc(avatarX + radius, avatarY + radius, radius, Math.PI, 1.5 * Math.PI, false); // 左上角
|
|
|
+ canvas.closePath(); // 关闭路径
|
|
|
+ canvas.clip(); // 剪切
|
|
|
+
|
|
|
+ // 绘制头像
|
|
|
+ canvas.drawImage(userAvatar, avatarX, avatarY, avatarSize, avatarSize); // 头像位置和大小
|
|
|
+ canvas.restore(); // 恢复状态
|
|
|
+ }
|
|
|
|
|
|
- // 加载主图片
|
|
|
- wx.getImageInfo({
|
|
|
- src: this.data.randomImage,
|
|
|
- success: (res) => {
|
|
|
- canvas.drawImage(res.path, 0, 0, width, this.rpxToPx(500)); // 调整图片高度
|
|
|
- // console.log('主图片加载成功');
|
|
|
-
|
|
|
- // 加载用户头像
|
|
|
- wx.getImageInfo({
|
|
|
- src: this.data.sharList[0].user.avatar,
|
|
|
- success: (avatarRes) => {
|
|
|
- // 绘制带圆角的头像
|
|
|
- const avatarX = this.rpxToPx(40);
|
|
|
- const avatarY = this.rpxToPx(540);
|
|
|
- const avatarSize = this.rpxToPx(83);
|
|
|
- const radius = avatarSize / 2; // 半径为头像大小的一半
|
|
|
-
|
|
|
- // 绘制圆角矩形
|
|
|
- canvas.save(); // 保存当前状态
|
|
|
- canvas.beginPath(); // 开始路径
|
|
|
- canvas.moveTo(avatarX + radius, avatarY); // 左上角
|
|
|
- canvas.lineTo(avatarX + avatarSize - radius, avatarY); // 上边
|
|
|
- canvas.arc(avatarX + avatarSize - radius, avatarY + radius, radius, 1.5 * Math.PI, 0, false); // 右上角
|
|
|
- canvas.lineTo(avatarX + avatarSize, avatarY + avatarSize - radius); // 右边
|
|
|
- canvas.arc(avatarX + avatarSize - radius, avatarY + avatarSize - radius, radius, 0, 0.5 * Math.PI, false); // 右下角
|
|
|
- canvas.lineTo(avatarX + radius, avatarY + avatarSize); // 下边
|
|
|
- canvas.arc(avatarX + radius, avatarY + avatarSize - radius, radius, 0.5 * Math.PI, Math.PI, false); // 左下角
|
|
|
- canvas.lineTo(avatarX, avatarY + radius); // 左边
|
|
|
- canvas.arc(avatarX + radius, avatarY + radius, radius, Math.PI, 1.5 * Math.PI, false); // 左上角
|
|
|
- canvas.closePath(); // 关闭路径
|
|
|
- canvas.clip(); // 剪切
|
|
|
-
|
|
|
- // 绘制头像
|
|
|
- canvas.drawImage(avatarRes.path, avatarX, avatarY, avatarSize, avatarSize); // 头像位置和大小
|
|
|
- canvas.restore(); // 恢复状态
|
|
|
- // console.log('头像加载成功');
|
|
|
-
|
|
|
- // 绘制昵称和时间
|
|
|
- const nickname = this.data.sharList[0].user.nickname;
|
|
|
- const currentTime = this.data.sharList[0].currentTime;
|
|
|
- const rank = this.data.sharList[0].rank;
|
|
|
- const steps = this.data.sharList[0].steps || 0;
|
|
|
- const distance = this.data.sharList[0].distance || 0;
|
|
|
-
|
|
|
- canvas.setFontSize(this.rpxToPx(30));
|
|
|
- canvas.fillText(nickname, this.rpxToPx(140), this.rpxToPx(580)); // 昵称位置
|
|
|
- // console.log('昵称加载成功');
|
|
|
- canvas.setFontSize(this.rpxToPx(28));
|
|
|
- canvas.fillText(currentTime, this.rpxToPx(140), this.rpxToPx(610)); // 时间位置
|
|
|
- // console.log('时间加载成功');
|
|
|
-
|
|
|
- // 绘制其他文本
|
|
|
- canvas.setFontSize(this.rpxToPx(55));
|
|
|
- canvas.fillText('梦想家', this.rpxToPx(40), this.rpxToPx(720));
|
|
|
- // console.log('梦想家加载成功');
|
|
|
- canvas.setFontSize(this.rpxToPx(30));
|
|
|
- canvas.fillText('用汗水实现想象,用脚步丈量梦想', this.rpxToPx(40), this.rpxToPx(780));
|
|
|
- // console.log('汗水加载成功');
|
|
|
-
|
|
|
- // 绘制排名、步数和公里数
|
|
|
- canvas.setFontSize(this.rpxToPx(28));
|
|
|
- // canvas.fillText('今日排名: ' + rank, 20, 400);
|
|
|
- canvas.fillText('今日排名', this.rpxToPx(40), this.rpxToPx(840));
|
|
|
- // console.log('排名加载成功');
|
|
|
- // canvas.fillText('今日步数: ' + steps, 20, 420);
|
|
|
- canvas.fillText('今日步数', this.rpxToPx(240), this.rpxToPx(840));
|
|
|
- // console.log('步数加载成功');
|
|
|
- // canvas.fillText('公里数: ' + distance + 'km', 20, 430);
|
|
|
- canvas.fillText('公里数', this.rpxToPx(440), this.rpxToPx(840));
|
|
|
- // console.log('公里数加载成功');
|
|
|
- canvas.setFontSize(this.rpxToPx(40));
|
|
|
- canvas.fillText(rank, this.rpxToPx(80), this.rpxToPx(900));
|
|
|
- canvas.fillText(steps, this.rpxToPx(240), this.rpxToPx(900));
|
|
|
- canvas.fillText(distance + 'km', this.rpxToPx(444), this.rpxToPx(900));
|
|
|
-
|
|
|
- // 绘制二维码(如果有)
|
|
|
- canvas.setFillStyle('red'); // 示例二维码
|
|
|
- canvas.fillRect(width - this.rpxToPx(140), height - this.rpxToPx(160), this.rpxToPx(120), this.rpxToPx(120)); // QR 位置
|
|
|
- // console.log('二维码绘制');
|
|
|
-
|
|
|
- canvas.setFillStyle('#0178EE');
|
|
|
- canvas.setFontSize(this.rpxToPx(28));
|
|
|
- canvas.fillText('长按二维码加入跑团', width - this.rpxToPx(420), height - this.rpxToPx(120));
|
|
|
- canvas.fillText('和我一起运动', width - this.rpxToPx(380), height - this.rpxToPx(80));
|
|
|
- // 完成绘制
|
|
|
- canvas.draw(false, () => {
|
|
|
- console.log('123');
|
|
|
- wx.canvasToTempFilePath({
|
|
|
- canvasId: 'myCanvas',
|
|
|
- success: (res) => {
|
|
|
- console.log('绘制完成', res);
|
|
|
- this.setData({
|
|
|
- saveimage: res.tempFilePath
|
|
|
- });
|
|
|
- console.log(this.data.saveimage);
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- console.error('canvasToTempFilePath 失败', err);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- console.error('用户头像加载失败', this.data.sharList[0].user.avatar, err);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- fail: () => {
|
|
|
- console.error('主图片加载失败');
|
|
|
- }
|
|
|
+ // 绘制昵称和时间
|
|
|
+ const nickname = this.data.sharList[0].user.nickname;
|
|
|
+ const currentTime = this.data.sharList[0].currentTime;
|
|
|
+ const rank = this.data.sharList[0].rank;
|
|
|
+ const steps = this.data.sharList[0].steps || 0;
|
|
|
+ const distance = this.data.sharList[0].distance || 0;
|
|
|
+
|
|
|
+ canvas.setFontSize(this.rpxToPx(30));
|
|
|
+ canvas.fillText(nickname, this.rpxToPx(140), this.rpxToPx(580)); // 昵称位置
|
|
|
+ // console.log('昵称加载成功');
|
|
|
+ canvas.setFontSize(this.rpxToPx(28));
|
|
|
+ canvas.fillText(currentTime, this.rpxToPx(140), this.rpxToPx(610)); // 时间位置
|
|
|
+ // console.log('时间加载成功');
|
|
|
+
|
|
|
+ // 绘制其他文本
|
|
|
+ canvas.setFontSize(this.rpxToPx(55));
|
|
|
+ canvas.fillText('梦想家', this.rpxToPx(40), this.rpxToPx(720));
|
|
|
+ // console.log('梦想家加载成功');
|
|
|
+ canvas.setFontSize(this.rpxToPx(30));
|
|
|
+ canvas.fillText('用汗水实现想象,用脚步丈量梦想', this.rpxToPx(40), this.rpxToPx(780));
|
|
|
+ // console.log('汗水加载成功');
|
|
|
+
|
|
|
+ // 绘制排名、步数和公里数
|
|
|
+ canvas.setFontSize(this.rpxToPx(28));
|
|
|
+ // canvas.fillText('今日排名: ' + rank, 20, 400);
|
|
|
+ canvas.fillText('今日排名', this.rpxToPx(40), this.rpxToPx(840));
|
|
|
+ // console.log('排名加载成功');
|
|
|
+ // canvas.fillText('今日步数: ' + steps, 20, 420);
|
|
|
+ canvas.fillText('今日步数', this.rpxToPx(240), this.rpxToPx(840));
|
|
|
+ // console.log('步数加载成功');
|
|
|
+ // canvas.fillText('公里数: ' + distance + 'km', 20, 430);
|
|
|
+ canvas.fillText('公里数', this.rpxToPx(440), this.rpxToPx(840));
|
|
|
+ // console.log('公里数加载成功');
|
|
|
+ canvas.setFontSize(this.rpxToPx(40));
|
|
|
+ canvas.fillText(rank, this.rpxToPx(80), this.rpxToPx(900));
|
|
|
+ canvas.fillText(steps, this.rpxToPx(240), this.rpxToPx(900));
|
|
|
+ canvas.fillText(distance + 'km', this.rpxToPx(444), this.rpxToPx(900));
|
|
|
+
|
|
|
+ // 绘制二维码(如果有)
|
|
|
+ canvas.setFillStyle('red'); // 示例二维码
|
|
|
+ canvas.fillRect(width - this.rpxToPx(140), height - this.rpxToPx(160), this.rpxToPx(120), this.rpxToPx(120)); // QR 位置
|
|
|
+ // console.log('二维码绘制');
|
|
|
+
|
|
|
+ canvas.setFillStyle('#0178EE');
|
|
|
+ canvas.setFontSize(this.rpxToPx(28));
|
|
|
+ canvas.fillText('长按二维码加入跑团', width - this.rpxToPx(420), height - this.rpxToPx(120));
|
|
|
+ canvas.fillText('和我一起运动', width - this.rpxToPx(380), height - this.rpxToPx(80));
|
|
|
+ // 完成绘制
|
|
|
+ canvas.draw(false, () => {
|
|
|
+ console.log('123');
|
|
|
+ wx.canvasToTempFilePath({
|
|
|
+ canvasId: 'myCanvas',
|
|
|
+ success: (res) => {
|
|
|
+ console.log('绘制完成', res);
|
|
|
+ this.setData({
|
|
|
+ saveimage: res.tempFilePath
|
|
|
+ });
|
|
|
+ console.log(this.data.saveimage);
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error('canvasToTempFilePath 失败', err);
|
|
|
+ }
|
|
|
+ });
|
|
|
});
|
|
|
|
|
|
+
|
|
|
},
|
|
|
//px
|
|
|
// saveImage() {
|
|
@@ -428,7 +433,7 @@ Page({
|
|
|
filePath: imagePath,
|
|
|
success: () => {
|
|
|
wx.showToast({
|
|
|
- title: '保存成功',
|
|
|
+ title: '图片已保存到相册',
|
|
|
icon: 'success'
|
|
|
});
|
|
|
},
|
|
@@ -447,55 +452,69 @@ Page({
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
- savepic2() {
|
|
|
- const that = this
|
|
|
- let fileName = new Date().valueOf();
|
|
|
- let filePath = wx.env.USER_DATA_PATH + '/' + fileName + '.jpg' //这边就是为了安卓做的兼容,因为安卓机有可能会将图片地址的后缀名读取为:unknow
|
|
|
- wx.downloadFile({
|
|
|
- url: that.data.saveimage, //需要保存的图片地址
|
|
|
- filePath: filePath,
|
|
|
- success: function (res) {
|
|
|
- // 保存图片到系统相册
|
|
|
- wx.saveImageToPhotosAlbum({
|
|
|
- filePath: filePath,
|
|
|
- success(data) {
|
|
|
- let fileMgr = wx.getFileSystemManager()
|
|
|
- fileMgr.unlink({
|
|
|
- filePath: filePath,
|
|
|
- success() {
|
|
|
- wx.showToast({
|
|
|
- title: '已保存至您的相册',
|
|
|
- icon: 'none',
|
|
|
- duration: 1500
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- fail(err) {
|
|
|
- if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
|
|
|
- wx.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '需要您授权保存相册',
|
|
|
- showCancel: false,
|
|
|
- success: modalSuccess => {
|
|
|
- wx.openSetting({
|
|
|
- success(settingdata) {
|
|
|
- if (settingdata.authSetting['scope.writePhotosAlbum']) {
|
|
|
- console.log('获取权限成功,给出再次点击图片保存到相册的提示。')
|
|
|
- } else {
|
|
|
- console.log('获取权限失败,给出不给权限就无法正常使用的提示')
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+ //保存图片到相册
|
|
|
+ savepic2: function () {
|
|
|
+ let that = this;
|
|
|
+ wx.canvasToTempFilePath({
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ width: 670,
|
|
|
+ height: 1100,
|
|
|
+ destWidth: 670,
|
|
|
+ destHeight: 1100,
|
|
|
+ canvasId: 'myCanvas',
|
|
|
+ success: function (result) {
|
|
|
+ wx.getSetting({
|
|
|
+ success(res) {
|
|
|
+ if (!res.authSetting['scope.writePhotosAlbum']) {
|
|
|
+ wx.authorize({
|
|
|
+ scope: 'scope.writePhotosAlbum',
|
|
|
+ success() {
|
|
|
+ //这里是用户同意授权后的回调
|
|
|
+ // that.saveImgToLocal();
|
|
|
+ wx.saveImageToPhotosAlbum({
|
|
|
+ filePath: result.tempFilePath,
|
|
|
+ success(res) {
|
|
|
+ wx.showToast({
|
|
|
+ title: '图片已保存到相册',
|
|
|
+ icon: 'success'
|
|
|
+ });
|
|
|
}
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail() { //这里是用户拒绝授权后的回调
|
|
|
+ wx.showToast({
|
|
|
+ title: '打开相册授权,才能保存图片哦~',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ that.setData({
|
|
|
+ openSettingBtnHidden: false
|
|
|
+ })
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- fail: function (res) {}
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ //调取小程序当中获取图片
|
|
|
+ console.log(result.tempFilePath);
|
|
|
+ wx.saveImageToPhotosAlbum({
|
|
|
+ filePath: result.tempFilePath,
|
|
|
+ success(res) {
|
|
|
+ wx.showToast({
|
|
|
+ title: '图片已保存到相册',
|
|
|
+ icon: 'success'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ fail: function (res) {
|
|
|
+ console.log(res)
|
|
|
+ }
|
|
|
})
|
|
|
- },
|
|
|
+ },
|
|
|
shar() {
|
|
|
wx.downloadFile({
|
|
|
url: this.data.saveimage, //图片服务器地址
|
|
@@ -514,9 +533,9 @@ Page({
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
- sharecircle(){
|
|
|
+ sharecircle() {
|
|
|
wx.navigateTo({
|
|
|
- url: '../../circle/send-circle/index?image='+this.data.saveimage // 目标页面的路径
|
|
|
+ url: '../../circle/send-circle/index?image=' + this.data.saveimage // 目标页面的路径
|
|
|
});
|
|
|
}
|
|
|
})
|