bug

nova-werun/pages/home/share/index.js

@@ -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 // 目标页面的路径
         });
     }
 })

nova-werun/pages/home/share/index.wxml

@@ -55,7 +55,7 @@
 
                 <view class="pic-tex">步小圈</view>
             </view>
-            <view class="share-pic" bindtap="savepic">
+            <view class="share-pic" bindtap="savepic2">
                 <view class="share-pic-box">
                     <image class="image" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241112/kbm618104717414.png?imageView2/1/w/200/h/200"></image>
                 </view>

project.config.json

@@ -10,7 +10,7 @@
         "include": []
     },
     "setting": {
-        "urlCheck": false,
+        "urlCheck": true,
         "es6": true,
         "enhance": true,
         "postcss": true,