更新记录

1.0.3（2025-04-28） 下载此版本

修复text文字绘制时超出省略异常显示； 优化部分判断语句及变量定义使用；

1.0.2（2025-04-21） 下载此版本

fix：修复基础绘制中文本align配置显示异常

1.0.1（2025-04-19） 下载此版本

路径文档更新

平台兼容性

uni-app

其他

cl-poster

页面中使用示例

import Poster from '@/uni_modules/cl-poster/js_sdk/cl-poster.js'
// vue3
// import { getCurrentInstance } from 'vue'
// const { proxy } = getCurrentInstance()
// 在子组件使用时需要添加下方的this vue3需获取proxy替换到this

const poster = new Poster()
const ctx = uni.createCanvasContext('canvasId',this)
// 传入canvas数据与实例 
poster.draw({
    canvas:[...], // 必填  canvas数据 按下方格式示例添加进数组
    width: 1000, // 必填  canvas宽度
    height: 1000 // 必填  canvas高度
},ctx).then(ctx=>{
    // poster.draw 返回一个promise对象
    // 绘制结束后回抛出canvas实例
    uni.canvasToTempFilePath({
        canvasId: 'canvasId',
        // destHeight, // 需要注意的是 destHeight destWidth 输出高度跟宽度大小 会小幅提升uni.canvasToTempFilePath 输出时间。尽量按自所需的高度输出
        // destWidth,
        fileType: 'jpg', // 输出图片格式 默认png 可选jpg png
        quality: 0.8, // 输出图片质量 默认1   需要注意的是 为1时会大幅提高uni.canvasToTempFilePath输出时间。建议值为0.8
        complete: res => {
            uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function () { },
                fail: function (err) { }
            })
        }
    }, this);
})

内置方法

poster.draw(canvasData,ctx)
poster.drawImg(item,ctx)
poster.drawText(item,ctx)
poster.drawQrCodeImg(item,ctx)
poster.drawTextToDiversity(item,ctx)
poster.drawLine(item,ctx)
poster.drawRect(item,ctx)
// item为Object 按下方数据格式直接传入

数据格式

image 图片

{
    "type": "image", // 必填  绘制类型
    "value": "图片地址", // 必填  图片地址
    "width": 100, // 必填  图片宽度
    "height": 100, // 必填  图片高度
    "x": 0, // 必填  图片x轴位置
    "y": 0, // 必填  图片y轴位置
    "radius": 0, // 圆角  默认0，可传入圆角值（number）或50%
    "border": { 
        "width": 0, // 边框宽度
        "color": "#000000" // 边框颜色
    },
    "fit":"fill" // 填充方式 默认fill 可选值 contain cover none fill
}

qrCode 二维码

{
    "type": "qrCode", // 必填 
    "value": "二维码内容", // 必填 
    "size": 100, // 必填 二维码大小
    "x": 0, // 必填 
    "y": 0, // 必填 
    "logo":{ // 二维码中心logo 注意宽度高度不要影响二维码识别
        "value":"图片地址",
        "width": 50,
        "height": 50,
        "radius":0,
    }
}

rect 矩形

{
    "type": "rect", // 必填 
    "x": 0, // 必填 
    "y": 0, // 必填 
    "width": 100, // 必填 
    "height": 100, // 必填 
    "radius": 0,
    "color": "#fff", // 矩形填充颜色 默认#fff
    "border": { 
        "width": 0,
        "color": "#000000"
    }
}

line 线

{
    "type": "line",
    "width": 1, // 线宽 默认1
    "color": "#000", // 线条颜色 默认#000
    "start": { // 必填 起点坐标
        "x": 0,
        "y": 0
    },
    "end": { // 必填 终点坐标
        "x": 0,
        "y": 0
    }
}

text 文字-基础绘制

{
    "type": "text",// 必填 
    "value": "文字内容", // 必填
    "style": { 
        // 可选
        "color": "#000", // 文字颜色 默认#000
        "weight": "normal", // 字体粗细 默认normal
        "size": 16, // 字体大小px 默认16
        "line":{ 
            // 划线配置
            "color": "#000", // 划线颜色
            "width": 1,
            "position": "center"
        }
    },
    "align": "left", // 文字对齐方式 默认left 可选值 left center right
    "width":100,
    "height":100,
    "maxLine": 1,
    "lineHeight": 16,
    "x": 0,
    "y": 0,
}

textToDiversity 文字-融合绘制

tip: 融合绘制对性能消耗较大，非必要请使用text基础绘制类型。

{
    "type": "textToDiversity",// 必填 
    "value": [ // 必填  文字绘制组
        {
            "text": "文字绘制内容",
            "style": {
                "color": "#000", // 文字颜色 默认#000
                "weight": "normal", // 字体粗细 默认normal
                "size": 16, // 字体大小px 默认16
                "line":{
                    "color": "#000", // 划线颜色
                    "width": 1, // 划线宽度
                    "position": "center" // 划线类型 默认center 可选值 bottom center
                }
            }
        },
    ],
    "align": "left", // 文字对齐方式 默认left 可选值 left center right
    "lineHeight": 16, // 必填  行高
    "width":100, // 必填 
    "height":100, // 必填 
    "maxLine": 1, // 最大行数 默认1 超出部分省略号
    "x": 0, // 必填 
    "y": 0, // 必填 
}

其他问题

1. 暂未支持内部方法导出图片 请直接在canvas dom组件中调用保存方法

   uni.canvasToTempFilePath({
   canvasId:canvasId,
   quality: 0.8, // 导出质量 默认1 建议值为0.8
   complete: res => {
       // res.tempFilePath; 图片临时地址
   }
   },this);

2. 绘制图片如果是线上图片请注意是否需要配置域名白名单。
3. 使用poster.draw({canvas:arr})绘制时数组按顺序开始绘制，数组越靠后的绘制内容层级将会更高。