更新记录

1.0.0（2024-06-22）

功能实装

平台兼容性

请注意，此插件只完美兼容wx小程序，其他端可能会有点问题，比如h5无法获取地址，app端还没测试过

请注意，目前只支持vue3版本

使用例子

<template>
    <view class="content">
        <CanvasToImg ref="canvasToImg_ele" :parameter="canvasToImg_parameter"></CanvasToImg>
        <button @click="change_and_save_img" style="position: absolute;left: 50%;transform: translateX(-50%);bottom: 10%;">点击保存图片</button>
    </view>
</template>

<script setup>
    import CanvasToImg from '@/uni_modules/canvas-to-img/components/canvas-to-img/canvas-to-img.vue'
    import {ref} from 'vue'

    const canvasToImg_ele=ref()

    const canvasToImg_parameter=ref({}) //不要在此直接赋值

    //点击事件
    const change_and_save_img=async()=>{
        //画图
        canvasToImg_parameter.value={
            root:{
                width:300,
                height:300,
                children:[
                    {
                        width:200,
                        height: 200,
                        left: 0,
                        top: 0,
                        bgimg: '/static/logo.png',
                        children: [{
                            fontsize: 15,
                            color: 'black',
                            text: "你好",
                            left: 10,
                            top: 8
                        }]
                    },
                ]
            }
        }

        //将canvas转为图片
        let result=await canvasToImg_ele.value.save_img()
        await uni.showToast({
            icon:'none',
            title:"图片地址:"+result,
        })
        console.log(result)
    }

</script>

方法

参数

参数说明

1.根节点root的width和height为最后生成图片的大小，其子元素多于此尺寸部分都不会被渲染

2.子元素目前仅有有三种类型：方形纯色填充，图片(本地或远程)，文字，它们都要在根节点之下，格式分别为：

//方形纯色填充
 root:{
       width:300,
       height:300,
         children:[
            {
               width:200,  //长
               height: 200, //宽
               left: 0,    //左偏移
               top: 0,    //上偏移
                bgcolor: 'red', //颜色(可以填16进制颜色代码例如#fff)
             },
                ]
            }

//图片
 root:{
       width:300,
       height:300,
         children:[
            {
               width:200,  //长
               height: 200, //宽
               left: 0,    //左偏移
               top: 0,    //上偏移
                bgimg: '/static/logo.png', //图片链接(可以本地也可以远程链接如(https://www.xxxx.xx/xxx.png))
             },
                ]
            }

//文字
 root:{
       width:300,
       height:300,
         children:[
            {
               fontsize:10,//文字大小
               left: 0,    //左偏移
               top: 0,    //上偏移(文字顶端离画布顶部的距离)
                text: '666', //文字
             },
                ]
            }

3.在children中嵌套和同级的关系

//嵌套和同级示例
 root:{
       width:300,
       height:300,
         children:[
            {
               width:200,  
               height: 200,
               left: 0,  
               top: 0,  
                bgimg: 'https://www.xxxx.xx/xxx.png',
                children:[
                     //嵌套
                     { 
                       fontsize:10,//文字大小
                       left: 0,    //左偏移
                       top: 0,    //上偏移(文字顶端离画布顶部的距离)
                        text: '666', //文字
                     },
                ]
             },
             //同级
             { 
               fontsize:10,//文字大小
               left: 0,    //左偏移
               top: 0,    //上偏移(文字顶端离画布顶部的距离)
                text: '666', //文字
             },
           ]
            }

嵌套主要的应用场景是在一些需要等待异步加载完成后再进行下一步的场景，例如我想绘制一张网络图片后再在此图片之上绘制文字，而不是因为异步的原因导致文字被图片覆盖掉