更新记录

1.0.0.2025072101-alp（2025-07-21） 下载此版本

1.0.0.2025072101-alpha

平台兼容性

uni-app(4.06)

uni-app x(4.06)

其他

介绍

uPoster UTS是一款基于Canvas的跨端图形编辑库，可快速生成海报图，支持可视化图形编辑。

查看演示：http://uqrcode.cn/uposter。

简单使用

1. 引入UPosterCanvas

import { UPosterCanvas } from "@/uni_modules/uposter-uts";

2. 在获取到Canvas组件上下文后进行实例化

<template>
  <view>
    <canvas type="2d" id="uposter" canvas-id="uposter" style="width: 300px;height: 500px;"></canvas>
  </view>
</template>

<script setup lang="uts">
  import { UPosterCanvas, UPosterCanvasOptions } from "@/uni_modules/uposter-uts";

  onReady(() => {
    // HBuilderX 4.25+
    // 异步调用方式, 跨平台写法
    uni.createCanvasContextAsync({
      id: 'uposter',
      component: getCurrentInstance()?.proxy,
      success: (context : CanvasContext) => {
        // 获取canvas
        const renderingContext = context.getContext('2d')!;
        const canvas = renderingContext.canvas;

        // 实例化UPosterCanvas对象
        const uPosterCanvas = new UPosterCanvas(canvas);
        uPosterCanvas.width = 300; // 画布宽度
        uPosterCanvas.height = 500; // 画布高度
        uPosterCanvas.pixelRatio = uni.getWindowInfo().pixelRatio; // 设备像素比
        // 或者
        // const uPosterCanvasOptions: UPosterCanvasOptions = {
        //   width: 300, // 画布宽度
        //   height: 500 // 画布高度
        // }
        // const uPosterCanvas = new UPosterCanvas(canvas, uPosterCanvasOptions);
      }
    });
  });
</script>

3. 添加元素

添加矩形

import { UPosterCanvas, UPosterRect, UPosterRectOptions } from "@/uni_modules/uposter-uts";

const uPosterCanvas = new UPosterCanvas(canvas);

// 以对象形式添加
const rect = new UPosterRect();
rect.x = 10;
rect.y = 10;
rect.width = 200;
rect.height = 200;
rect.color = "#eca914";
uPosterCanvas.addElement(rect);

// 以入参形式添加
const rectOptions : UPosterRectOptions = {
  x: 10,
  y: 10,
  width: 200,
  height: 200,
  angle: 45,  // 旋转角度
  color: "#ff0000"
}
uPosterCanvas.addRect(rectOptions);

添加图片

import { UPosterCanvas, UPosterImage, UPosterImageOptions } from "@/uni_modules/uposter-uts";

const uPosterCanvas = new UPosterCanvas(canvas);

// 以对象形式添加
const image = new UPosterImage();
image.x = 10;
image.y = 10;
image.width = 200;
image.height = 200;
image.src = "/static/logo.png"; // 图片路径
uPosterCanvas.addElement(image);

// 以入参形式添加
const imageOptions : UPosterImageOptions = {
  x: 10,
  y: 10,
  width: 200,
  height: 200,
  angle: 45,  // 旋转角度
  src: "/static/logo.png" // 图片路径
}
uPosterCanvas.addImage(imageOptions);

添加文本

import { UPosterCanvas, UPosterText, UPosterTextOptions } from "@/uni_modules/uposter-uts";

const uPosterCanvas = new UPosterCanvas(canvas);

// 以对象形式添加
const text = new UPosterText();
text.x = 10;
text.y = 10;
text.width = 300;
text.height = 100;
text.content = "Hello,UPoster!"; // 文本内容
text.color = "#eca914"; // 文字颜色
text.fontSize = 24; // 字体大小
text.fontFamily = "sans-serif"; // 字体样式
text.fontWeight = "bold"; // 字体粗细
uPosterCanvas.addElement(text);

// 以入参形式添加
const textOptions : UPosterTextOptions = {
  x: 10,
  y: 10,
  width: 300,
  height: 100,
  angle: 45,  // 旋转角度
  content: "Hello,UPoster!", // 文本内容
  color: "#eca914", // 文字颜色
  fontSize: 24, // 字体大小
  fontFamily: "sans-serif", // 字体样式
  fontWeight: "bold" // 字体粗细
}
uPosterCanvas.addText(textOptions);

通过JSON数据加载

const uPosterCanvas = new UPosterCanvas(canvas);

// JSON Object
const jObject = {
  "width": 768,
  "height": 1024,
  "backgroundColor": "rgba(255,255,255,0.1)",
  "elements": [
    {
      "type": "Rect",
      "width": 300,
      "height": 200,
      "x": 100,
      "y": 100,
      "angle": 45,
      "color": "#3498db"
    },
    {
      "type": "Image",
      "width": 300,
      "height": 300,
      "x": 80,
      "y": 600,
      "angle": 0,
      "backgroundColor": "rgba(52,152,60,0.5)",
      "borderWidth": 10,
      "borderColor": "#34983c",
      "src": "/static/logo.png"
    },
    {
      "type": "Text",
      "width": 280,
      "height": 60,
      "x": 400,
      "y": 500,
      "angle": -20,
      "backgroundColor": "rgba(0,0,0,0.5)",
      "borderWidth": 5,
      "borderColor": "#ffffff",
      "borderRadius": 10,
      "content": "Hello,UPoster!",
      "color": "#ffffff",
      "fontFamily": "sans-serif",
      "fontSize": 32,
      "fontWeight": "bold",
      "lineHeight": 40
    }
  ]
};
uPosterCanvas.loadObject(jObject);

// JSON String
const jString = JSON.stringify(jObject)!;
uPosterCanvas.loadJSON(jString);

// 将画布内容序列化为Object
const uPosterObject = uPosterCanvas.toObject();
// 将画布内容序列化为JSON
const uPosterJSON = uPosterCanvas.toJSON();

创建一个简单的图形编辑器

注册事件

需要给Canvas注册touchstart，touchmove，touchend等事件用于输入控制。

完整示例

<template>
  <view>
    <canvas type="2d" id="uposter" canvas-id="uposter" style="width: 300px;height: 500px;" @touchstart="Canvas" @touchmove="Canvas" @touchend="Canvas" @touchcancel="Canvas"></canvas>
  </view>
</template>

<script setup lang="uts">
  import { UPosterCanvas, UPosterCanvasOptions, UPosterPoint, UPosterRect } from "@/uni_modules/uposter-uts";

  let uPosterCanvas : UPosterCanvas | null = null;

  onReady(() => {
    // HBuilderX 4.25+
    // 异步调用方式, 跨平台写法
    uni.createCanvasContextAsync({
      id: 'uposter',
      component: getCurrentInstance()?.proxy,
      success: (context : CanvasContext) => {
        // 获取canvas
        const renderingContext = context.getContext('2d')!;
        const canvas = renderingContext.canvas;

        // 实例化UPosterCanvas对象
        uPosterCanvas = new UPosterCanvas(canvas);
        const upc = uPosterCanvas!;
        upc.width = 300; // 画布宽度
        upc.height = 500; // 画布高度
        upc.pixelRatio = uni.getWindowInfo().pixelRatio; // 设备像素比
        upc.static = false; // 关闭静态画布，可执行拖拽画布内元素，缩放，旋转等操作
        upc.showGrid = true; // 显示画布网格
        upc.showInfo = true; // 显示画布信息

        // 创建一个矩形用于测试
        const rect = new UPosterRect();
        rect.width = 200;
        rect.height = 200;
        rect.color = "ff0000";
        upc.addElement(rect);
      }
    });
  });

  const Canvas = (e : UniTouchEvent) => {
    const touch = e.touches[0];
    const point : UPosterPoint = {
      x: touch.clientX,
      y: touch.clientY
    }
    uPosterCanvas!.onTouchStart(point);
  }

  const Canvas = (e : UniTouchEvent) => {
    const touch = e.touches[0];
    const point : UPosterPoint = {
      x: touch.clientX,
      y: touch.clientY
    }
    uPosterCanvas!.onTouchMove(point);
  }

  const Canvas = () => {
    uPosterCanvas!.onTouchEnd();
  }

  const Canvas = () => {
    Canvas();
  }
</script>

UPosterCanvas实例说明

实例属性

实例方法

render()

手动渲染画布

renderAsync()

手动渲染画布，异步方法，可使用async/await等待执行结束，一般用于画布包含来自网络资源的图片，导出画布内容为图片时，等待画布图片元素加载完毕，确保绘制正常。

addElement(element: UPosterElement)

画布添加元素方法

addRect(options : UPosterRectOptions) : UPosterRect

画布添加一个矩形元素，并返回矩形元素实例

addImage(options : UPosterImageOptions) : UPosterImage

画布添加一个图片元素，并返回图片元素实例

addText(options : UPosterTextOptions) : UPosterText

画布添加一个文本元素，并返回文本元素实例

loadObject(object : UPosterObject)

加载对象类型的数据到画布

loadJSON(json : string)

加载JSON字符串数据到画布

toObject() : UPosterObject

导出画布内容为对象

toJSON() : string

导出画布内容为JSON

onTouchStart(e : UPosterPoint)

触摸事件，对应touchstart

onTouchMove(e : UPosterPoint)

触摸事件，对应touchmove

onTouchEnd()

触摸事件，对应touchend

clearActiveElement()

清除当前活动元素

clearAllElement()

清空所有元素

zoom(scale : number, centerX : number | null = null, centerY : number | null = null)

画布缩放，scale为缩放倍率，centerX为水平缩放基点，centerY为垂直缩放基点。centerX，centerY为空则以画布中心为基点进行缩放

reset()

重置画布

UPosterRect实例说明

实例属性

实例方法

UPosterImage实例说明

实例属性

实例方法

UPosterText实例说明

实例属性

实例方法