update

src/pages/moment/moment_detail_share.tsx

@@ -0,0 +1,157 @@
+import { useDispatch, useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import { View, Canvas } from "@tarojs/components";
+import Taro, { useDidShow } from "@tarojs/taro";
+
+export default function MomentShare(props: { user: any, cover?: string }) {
+    const user = props.user;
+
+    const info = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync()
+    const dpr = info.pixelRatio; // 获取设备的像素比
+
+
+    useEffect(() => {
+        if (user.isLogin) {
+            // beginDraw()
+            downCover()
+        }
+    }, [user])
+
+    useDidShow(() => {
+        if (user.isLogin) {
+            // beginDraw()
+            downCover()
+        }
+    })
+
+    async function downCover() {
+        var urls: any = []
+        if (props.cover) {
+            urls = [props.cover, user.avatar]
+        }
+        else {
+            urls = [user.avatar]
+        }
+        try {
+            const imagePaths = await Promise.all(urls.map(downloadImage));
+            beginDraw(imagePaths);
+        } catch (error) {
+            console.error('下载图片错误:', error);
+        }
+    }
+
+    function downloadImage(url) {
+        return new Promise((resolve, reject) => {
+            Taro.downloadFile({
+                url,
+                success: (res) => {
+                    if (res.statusCode === 200) {
+                        resolve(res.tempFilePath);
+                    } else {
+                        reject(new Error('图片下载失败'));
+                    }
+                },
+                fail: (err) => {
+                    reject(err);
+                }
+            });
+        });
+    }
+
+    function beginDraw(imagePaths) {
+
+        const query = Taro.createSelectorQuery();
+        query.select(`#momentdetail_share`).fields({ node: true, size: true });
+        query.exec((res) => {
+            const _canvas = res[0].node;
+            _canvas.width = res[0].width * dpr;
+            _canvas.height = res[0].height * dpr;
+            const ctx = _canvas.getContext('2d');
+            global.canvas2 = _canvas
+
+            if (props.cover) {
+                drawDetail(ctx, imagePaths, _canvas)
+            }
+            else {
+                drawDetail2(ctx, imagePaths, _canvas)
+            }
+
+        });
+    }
+
+    function drawDetail(ctx, imagePaths, canvas) {
+        const img = canvas.createImage(); // 创建图像对象
+        img.src = imagePaths[0]
+        img.onload = () => {
+            ctx.drawImage(img, 0, 0, 420 * dpr, 336 * dpr);
+            ctx.stroke();
+            const img1 = canvas.createImage(); // 创建图像对象
+            img1.src = imagePaths[1]
+            img1.onload = () => {
+                ctx.font = `bold ${24 * dpr}px sans-serif`
+                ctx.fillStyle = '#E0B152'
+                ctx.textAlign = 'center'
+                var name = user.nickname.length > 8 ? user.nickname.substring(0, 8) + '...' : user.nickname
+                ctx.fillText(name, 210 * dpr, 182 * dpr);
+
+                ctx.beginPath()
+                ctx.arc(210 * dpr, 82 * dpr, 70 * dpr, 0, Math.PI * 2)
+                ctx.clip()
+                ctx.drawImage(img1, 140 * dpr, 12 * dpr, 140 * dpr, 140 * dpr);
+                ctx.restore()
+                ctx.stroke();
+                
+
+                Taro.canvasToTempFilePath({
+                    canvas: canvas,
+                    success: (res) => {
+                        console.log('图片保存成功:', res.tempFilePath);
+                        global.momentdetail_share_url = res.tempFilePath
+                    },
+                    fail: (err) => {
+                        console.error('转为图片失败:', err);
+                    }
+                });
+            }
+        };
+
+    }
+
+    function drawDetail2(ctx, imagePaths, canvas) {
+        ctx.fillStyle = '#fff'
+        ctx.fillRect(0, 0, 420 * dpr, 336 * dpr);
+        const img1 = canvas.createImage(); // 创建图像对象
+        img1.src = imagePaths[0]
+        img1.onload = () => {
+            ctx.font = `bold ${24 * dpr}px sans-serif`
+            ctx.fillStyle = '#E0B152'
+            ctx.textAlign = 'center'
+            var name = user.nickname.length > 8 ? user.nickname.substring(0, 8) + '...' : user.nickname
+            ctx.fillText(name, 210 * dpr, 182 * dpr);
+
+            ctx.beginPath()
+            ctx.arc(210 * dpr, 82 * dpr, 70 * dpr, 0, Math.PI * 2)
+            ctx.clip()
+            ctx.drawImage(img1, 140 * dpr, 12 * dpr, 140 * dpr, 140 * dpr);
+            ctx.restore()
+            ctx.stroke();
+
+            Taro.canvasToTempFilePath({
+                canvas: canvas,
+                success: (res) => {
+                    console.log('图片保存成功:', res.tempFilePath);
+                    global.momentdetail_share_url = res.tempFilePath
+                },
+                fail: (err) => {
+                    console.error('转为图片失败:', err);
+                }
+            });
+        }
+
+
+    }
+
+    return <View style={{ position: 'absolute', left: 0, top: -500, width: 420, height: 336, zIndex: 10000 }}>
+        <Canvas canvasId='momentdetail_share' id='momentdetail_share' className="canvas" type="2d" style={{ width: 420, height: 336, zIndex: 0 }} />
+    </View>
+}

src/pages/moment/moment_share.tsx

@@ -76,6 +76,36 @@ export default function MomentShare() {
             const img1 = canvas.createImage(); // 创建图像对象
             img1.src = imagePaths[1]
             img1.onload = () => {
+                // ctx.fillStyle = '#ff0000'
+                // ctx.fillRect(0, 0, 420 * dpr, 336 * dpr);
+
+                const x = 64 * dpr; // 矩形左上角 x 坐标
+                const y = 212 * dpr; // 矩形左上角 y 坐标
+                const width = 292 * dpr; // 矩形宽度
+                const height = 72 * dpr; // 矩形高度
+                const radius = 18 * dpr; // 圆角半径
+
+                // 绘制带圆角的矩形
+
+                ctx.beginPath();
+                ctx.moveTo(x + radius, y); // 移动到左上角的圆角位置
+                ctx.arcTo(x + width, y, x + width, y + height, radius); // 右上角
+                ctx.arcTo(x + width, y + height, x, y + height, radius); // 右下角
+                ctx.arcTo(x, y + height, x, y, radius); // 左下角
+                ctx.arcTo(x, y, x + width, y, radius); // 左上角
+                ctx.closePath();
+                ctx.fillStyle = '#ff0000'; // 设置填充颜色为红色
+                ctx.fill(); // 填充矩形
+
+                ctx.font = `bold ${26 * dpr}px sans-serif`
+                ctx.fillStyle = '#ffffff'
+                ctx.textAlign = 'center'
+                ctx.fillText('立即跟卡', x + width / 2.0, y + height / 2.0+10*dpr);
+
+
+
+
+
                 ctx.font = `bold ${24 * dpr}px sans-serif`
                 ctx.fillStyle = '#E0B152'
                 ctx.textAlign = 'center'
@@ -89,6 +119,11 @@ export default function MomentShare() {
                 ctx.restore()
                 ctx.stroke();
 
+
+
+
+
+
                 Taro.canvasToTempFilePath({
                     canvas: canvas,
                     success: (res) => {