uniapp开发微信小程序生成分享海报（setup语法糖）

之前写app的时候用的html2canvas，本来想着哎呀~有相同的功能，这不是省事了，结果用不了。好吧，换方案，开始~~就有了下面这些代码

可以直接用的 但是有一个问题还没有解决 就是如果封装成组件的话就没办法转成图片 有做过的朋友帮帮我吧~~

<template>
    <view v-show='!showPicture'>
        <!-- 页面的内容 -->
    </view>
    <canvas v-show='showPicture' canvas-id="save-picture" :disable-scroll="true" style='width:375px;height:580px'>
    </canvas>
    <button v-show='!showPicture' @click="toImg">转图片</button>
    <button v-show='showPicture' @click="toSave">保存图片</button>
</template>
​
<script setup>
    import {
        ref,
        getCurrentInstance
    } from 'vue'
    import imageBg from '../../static/shareBkg.png'
    import imageCode from '../../static/logo.png'
    const instance = getCurrentInstance()
    const contentText = ref('嘎斯幅度过大书法大赛')
​
    // 图片显示隐藏
    const showPicture= ref(false)
    // 图片路径
    const imageUrl = ref(‘)
​
    // 点击生成图片
    const toImg = () => {
        showPicture.value = true;
        uni.showLoading({
            mask: true,
            title: "生成中..."
        });
​
​
        // 开始绘画
        const ctx = uni.createCanvasContext("save-picture", instance);
        ctx.drawImage(imageBg, 0, 0, 300, 500); //背景图片
        ctx.drawImage(imageCode, 200, 400, 60, 60); //描绘图片
        ctx.fillText(contentText.value, 40, 80, 100)
        // 将绘画转为图片
        ctx.draw(false, () => {
            uni.canvasToTempFilePath({
                canvasId: "save-picture",
                width: 300,
                height: 500,
                fileType: 'jpg',
                success: (res) => {
                    console.log(res.tempFilePath);
                    imageUrl.value = res.tempFilePath
                    uni.hideLoading();
                },
            });
        });
    }
    const toSave = () => {
        uni.saveImageToPhotosAlbum({
            filePath: imageUrl.value,
            success: function() {
                console.log('save success');
            }
        });
    }
</script>
​
<style>
​
</style>

小程序下获取网络图片信息需先配置download域名白名单才能生效

我直接理解为把网络图片转本地

uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: function (image) {
                console.log(image.width);
                console.log(image.height);
            }
        });