更新记录

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

路径文档更新

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

初始化

平台兼容性

cl-poster

页面中使用示例

import Poster from '@/js_sdk/cl-poster/cl-poster.js'
const poster = new Poster()
const ctx = uni.createCanvasContext('canvasId')
// 传入canvas数据与实例 
poster.draw({
    canvas:[...], // 必填  canvas数据 按下方格式示例添加进数组
    width: 1000, // 必填  canvas宽度
    height: 1000 // 必填  canvas高度
},ctx).then(ctx=>{
    // poster.draw 返回一个promise对象
    // 绘制结束后回抛canvas实例
    uni.canvasToTempFilePath({
        canvasId:'canvasId',
        quality: 1, // 导出质量
        complete: res => {
            // res.tempFilePath; 图片临时地址
        }
    },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": "400", // 字体粗细 默认400
        "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": "400", // 字体粗细 默认400
                "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: 1, // 导出质量
   complete: res => {
       // res.tempFilePath; 图片临时地址
   }
   },this);

2. 暂未支持base64图片绘制
3. 绘制图片域名需要配置白名单