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

原创已于 2024-03-08 11:26:43 修改 · 835 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序 #apache

于 2024-03-06 14:04:04 首次发布

本文讲述了作者在开发小程序时尝试使用HTML2Canvas功能遇到的问题，即如何在封装成组件后实现图片转换，以及涉及到的小程序下载域名白名单配置。作者提供了相关代码片段和解决方案，寻求帮助解决组件化情况下无法将canvas内容转为图片的难题。

之前写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);
            }
        });