家政预约小程序09小程序分享及海报分享

[  {    "key": "id",    "value": $w.page.dataset.params.id  }]

export default async function ({ event, data }) {        $w.utils.showLoading({        title: "加载中",        mask: false,    })    //获取canvas实例和上下文    const canvas = $w.canvas1.canvasInstance    const ctx = $w.canvas1.canvasCtx    //获取可视窗口的宽高    const width = $w.device.viewport.width    const height = $w.device.viewport.height    //获取设备像素比    let dpr = wx.getWindowInfo().pixelRatio    if (ctx && canvas && $w.canvas1?.type === '2d') {        // 清空画布        ctx.clearRect(0, 0, width, height)        //初始化画布大小、画布的最终大小需要按设备像素比进行转换、        canvas.width = width * dpr        canvas.height = height * dpr        ctx.scale(dpr, dpr)        //ctx.fillStyle = "rgb(246, 248, 251,0)";        //ctx.fillRect(0, 0, canvas.width, canvas.height)        //准备好的poster图片和二维码图片        let posterMoudleImg = 'https://lowcode-9g6zlcz504383ac8-1305601167.tcloudbaseapp.com/resources/2024-05/lowcode-1824729'        let codeImg = 'https://lowcode-9g6zlcz504383ac8-1305601167.tcloudbaseapp.com/resources/2024-05/lowcode-1824572'        //获取海报图片的尺寸        let posterImgInfo = await new Promise((reslove) => {            wx.getImageInfo({                src: posterMoudleImg,                success(res) {                    reslove(res);                }            })        })        // 计算出新的图片宽高（此处以宽为基准，按90%的宽等比例缩放图片）        let posterImgRate = posterImgInfo.width / posterImgInfo.height        let posterWidth = 0.9 * width        let posterHeight = posterWidth / posterImgRate        //获取poster图片信息        let posterImg = canvas.createImage()        posterImg.src = posterMoudleImg        posterImg.onload = async () => {            //绘制海报底图            let x_position = (width - posterWidth) / 2, y_position = 20            ctx.drawImage(posterImg, x_position, y_position, posterWidth, posterHeight)            const qrcodeImg = canvas.createImage()            qrcodeImg.src = codeImg            qrcodeImg.onload = async () => {                ctx.drawImage(qrcodeImg, 0.75 * posterWidth, 0.83 * posterHeight, posterWidth / 4, posterWidth / 4)            }                        if ($w.wedaContext.platforms.includes('MP')) {                setTimeout(() => {                    ctx.draw(true, wx.canvasToTempFilePath(                        {                            x: x_position,   // 指定的画布区域的左上角横坐标                            y: y_position,       // 指定的画布区域的左上角纵坐标                            width: width - x_position * dpr * 2,     // 指定的画布区域的宽度                            height: (width - x_position * dpr * 2) / posterImgRate,   // 指定的画布区域的高度                            destWidth: (width - x_position * dpr * 2) * dpr, // 输出的图片的宽度                            destHeight: (width - x_position * dpr * 2) / posterImgRate * dpr, // 输出的图片的高度                            canvas: canvas,                            //quality: 1,                            success(res) {                                $w.page.setState({ "tempFilePath": res.tempFilePath }) //将图片临时路径保存到自定义变量tempFilePath                                //console.log($w.page.dataset.state.tempFilePath)                            },                            fail(res) {                                console.log('error')                                $w.utils.showToast({                                    title: "保存失败", // 提示的内容,                                    icon: "error", // 图标,                                    duration: 2000, // 延迟时间,                                    mask: true, // 移动端是否显示透明蒙层（移动端显示透明蒙层可以防止触摸穿透，PC 端不受此配置影响）                                })                            },                            complete(res) {                                //console.log(res)                                $w.utils.hideLoading();                            }                        })                    )                }, 1500)            }        }    }}

export default function savePoster() {     wx.saveImageToPhotosAlbum({        filePath: $w.page.dataset.state.tempFilePath, //图片临时路径        success(res) {            $w.utils.showToast({                title: "保存成功", // 提示的内容,                icon: "success", // 图标,                duration: 2000, // 延迟时间,                mask: true, // 移动端是否显示透明蒙层（移动端显示透明蒙层可以防止触摸穿透，PC 端不受此配置影响）            });        },        fail(res) {            $w.utils.showToast({                title: "保存失败", // 提示的内容,                icon: "error", // 图标,                duration: 2000, // 延迟时间,                mask: true, // 移动端是否显示透明蒙层（移动端显示透明蒙层可以防止触摸穿透，PC 端不受此配置影响）            });        }    })}