更新记录

1.0.5（2024-08-05） 下载此版本

修改绘制模糊处理方式

1.0.4（2024-08-05） 下载此版本

修改绘制模糊处理方式

1.0.3（2024-07-24） 下载此版本

1.0.3版本修复以下问题 1.生成的图片比较模糊 2.背景颜色不生效

平台兼容性

uni-app

其他

介绍

开发原生小程序的时候使用过一个canvas生成图片的工具Painter，支持使用json格式配置生成各种定制化图片和二维码，但是作者只发布了微信小程序原生的版本。最近在使用uniapp开发，就把插件改造了一下，在uniapp中正常运行，目前测试了web，小程序，app。

图一，小程序运行

图二，web运行

使用方法

组件文档

使用方法

和Painter项目一致，只是painter组件改为l-painter，开发者开发过Painter可以无缝使用

如下：

<l-painter style="position:fixed;top:-9999rpx" :palette="template" @imgOK="onImgOK" :scaleRatio="dpr"/>

data() {
    return {
        template: {},
        dpr: 1
    }
},
onLoad() {
    this.dpr = parseFloat(uni.getSystemInfoSync().devicePixelRatio.toFixed(1))
},
onShow(){
    this.template = {
    background : "#409EFF",
    width: "400rpx",
    height:"750rpx",
    views:[{
        type:'text',
        text:'l-painter',
        css:{
            color:"#000",
            fontSize:"60rpx",
            fontWeight:'bold',
            height:'100rpx',
            left:'50rpx',
            top:'50rpx',
            width:'300rpx',
        }
    },{
        type:'rect',
        css:{
            color:'#000',
            height:'100rpx',
            width:'100rpx',
            left:'116rpx',
            top:'214rpx'
        }
    },{
        type:'image',
        url:"http://bearcarimg.codebear.cn/be123aa0b72465ee503c7ba5c368863bXC6Yu6FwQMPiYF1yk3F2q!gradual.show",
        css:{
            height:'267rpx',
            width:'200rpx',
            left:'23rpx',
            top:'331rpx'
        }
    }]
}

}

methods:{
    onImgOK(e){
        console.log(e)
        //e.detail.path  图片路径
    }

}