baocuntupian

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

@@ -25,7 +25,8 @@ Page({
             'https://ts1.cn.mm.bing.net/th/id/R-C.d8333a26a5494dfe1dc88e9fdd04fb31?rik=08fpnYZSbboHfQ&riu=http%3a%2f%2fpic.ibaotu.com%2fspiders%2f33817-59a6262d3ff70.jpg&ehk=fKs2FTTgk2k0kqet%2fVO%2bAS3D0Q6zlNyUPmT8UE%2bvpdY%3d&risl=&pid=ImgRaw&r=0',
             'https://pic.nximg.cn/file/20230420/12106414_122949747127_2.jpg'
         ],
-        randomImage:''
+        randomImage: '',
+        saveimage: ''
     },
 
     /**
@@ -147,6 +148,7 @@ Page({
         this.setData({
             sharList
         });
+        this.saveImage()
         console.log(this.data.sharList);
     },
     //随机展示图片
@@ -156,4 +158,294 @@ Page({
             randomImage: this.data.images[randomIndex]
         });
     },
+    //绘制canvas
+    rpxToPx(rpx) {
+        const systemInfo = wx.getSystemInfoSync();
+        return rpx * (systemInfo.windowWidth / 750);
+    },
+    //rpx
+    saveImage() {
+        // console.log('运行了');
+        const canvas = wx.createCanvasContext('myCanvas');
+        const width = this.rpxToPx(670);
+        const height = this.rpxToPx(1100);
+        // console.log(width, height);
+        canvas.width = this.rpxToPx(670);
+        canvas.height = this.rpxToPx(1100);
+
+        // 绘制背景
+        canvas.setFillStyle('#CAE1FD'); // 背景色
+        canvas.fillRect(0, 0, width, height);
+        canvas.setFillStyle('#0178EE');
+
+        // 加载主图片
+        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: () => {
+                        console.error('用户头像加载失败');
+                    }
+                });
+            },
+            fail: () => {
+                console.error('主图片加载失败');
+            }
+        });
+
+    },
+    //px
+    // saveImage() {
+    //     // console.log('运行了');
+    //     const canvas = wx.createCanvasContext('myCanvas');
+    //     const width = 335;
+    //     const height = 550;
+    //     // console.log(width, height);
+    //     canvas.width = 335;
+    //     canvas.height = 550;
+
+    //     // 绘制背景
+    //     canvas.setFillStyle('#CAE1FD'); // 背景色
+    //     canvas.fillRect(0, 0, width, height);
+    //     canvas.setFillStyle('#0178EE');
+
+    //     // 加载主图片
+    //     wx.getImageInfo({
+    //         src: this.data.randomImage,
+    //         success: (res) => {
+    //             canvas.drawImage(res.path, 0, 0, width, 250); // 调整图片高度
+    //             // console.log('主图片加载成功');
+
+    //             // 加载用户头像
+    //             wx.getImageInfo({
+    //                 src: this.data.sharList[0].user.avatar,
+    //                 success: (avatarRes) => {
+    //                     // 绘制带圆角的头像
+    //                     const avatarX = 20;
+    //                     const avatarY = 270;
+    //                     const avatarSize = 42.5;
+    //                     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(15);
+    //                     canvas.fillText(nickname, 70, 290); // 昵称位置
+    //                     // console.log('昵称加载成功');
+    //                     canvas.setFontSize(14);
+    //                     canvas.fillText(currentTime, 70, 305); // 时间位置
+    //                     // console.log('时间加载成功');
+
+    //                     // 绘制其他文本
+    //                     canvas.setFontSize(27.5);
+    //                     canvas.fillText('梦想家', 20, 360);
+    //                     // console.log('梦想家加载成功');
+    //                     canvas.setFontSize(15);
+    //                     canvas.fillText('用汗水实现想象，用脚步丈量梦想', 20, 390);
+    //                     // console.log('汗水加载成功');
+
+    //                     // 绘制排名、步数和公里数
+    //                     canvas.setFontSize(14);
+    //                     // canvas.fillText('今日排名: ' + rank, 20, 400);
+    //                     canvas.fillText('今日排名', 20, 420);
+    //                     // console.log('排名加载成功');
+    //                     // canvas.fillText('今日步数: ' + steps, 20, 420);
+    //                     canvas.fillText('今日步数', 120, 420);
+    //                     // console.log('步数加载成功');
+    //                     // canvas.fillText('公里数: ' + distance + 'km', 20, 430);
+    //                     canvas.fillText('公里数', 220, 420);
+    //                     // console.log('公里数加载成功');
+    //                     canvas.setFontSize(20);
+    //                     canvas.fillText(rank, 40, 450);
+    //                     canvas.fillText(steps, 122, 450);
+    //                     canvas.fillText(distance + 'km', 222, 450);
+
+    //                     // 绘制二维码（如果有）
+    //                     canvas.setFillStyle('red'); // 示例二维码
+    //                     canvas.fillRect(width - 70, height - 80, 60, 60); // QR 位置
+    //                     // console.log('二维码绘制');
+
+    //                     canvas.setFillStyle('#0178EE');
+    //                     canvas.setFontSize(14);
+    //                     canvas.fillText('长按二维码加入跑团', width - 210, height - 60);
+    //                     canvas.fillText('和我一起运动', width - 190, height - 40);
+    //                     // 完成绘制
+    //                     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: () => {
+    //                     console.error('用户头像加载失败');
+    //                 }
+    //             });
+    //         },
+    //         fail: () => {
+    //             console.error('主图片加载失败');
+    //         }
+    //     });
+
+    // },
+    //点击保存图片
+    async savepic() {
+        await this.saveImage()
+        const imagePath = this.data.saveimage; // 获取保存的图片路径
+        if (imagePath) {
+            // 调用保存图片到相册的方法
+            wx.saveImageToPhotosAlbum({
+                filePath: imagePath,
+                success: () => {
+                    wx.showToast({
+                        title: '保存成功',
+                        icon: 'success'
+                    });
+                },
+                fail: (err) => {
+                    console.error('保存失败', err);
+                    wx.showToast({
+                        title: '保存失败',
+                        icon: 'none'
+                    });
+                }
+            });
+        } else {
+            wx.showToast({
+                title: '没有可保存的图片',
+                icon: 'none'
+            });
+        }
+    }
 })

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

@@ -1,7 +1,7 @@
 <!--nova-werun/pages/home/share/index.wxml-->
 <nav type="back" title="转发分享" background-color="{{'#73AEF9'}}" front-color="{{'#ffffff'}}"></nav>
 <view class="all" style="height: {{contentHeight}}rpx;">
-    <view class="box">
+    <!-- <view class="box">
         <image class="picture" src="{{randomImage}}" mode="aspectFit"></image>
         <view class="namebox">
             <image src="{{sharList[0].user.avatar}}"></image>
@@ -36,7 +36,8 @@
             </view>
             <view class="erweima"></view>
         </view>
-    </view>
+    </view> -->
+    <canvas canvas-id="myCanvas" style=" width: 670rpx;height: 1100rpx;"></canvas>
     <view class="sharebox">
         <view class="share-text">分享到</view>
         <view class="share-picbox">
@@ -54,12 +55,12 @@
 
                 <view class="pic-tex">步小圈</view>
             </view>
-            <view class="share-pic">
+            <view class="share-pic" bindtap="savepic">
                 <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>
 
-                <view class="pic-tex">保存图片</view>
+                <view class="pic-tex" >保存图片</view>
             </view>
 
         </view>