uniapp 生成海报插件

生成海报支持小程序和app

使用方法

安装

npm i uniapp-painter

引入并注册组件

import Painter from "uniapp-painter";

export default {
  components: {
    Painter
  },
};

在 template 模板中使用

<painter class="painter-instance" :palette="palette" :scale-ratio="1" @imgOK='onImgOk' @imgErr="onImgErr"></painter>

海报模板示例

palette: {
  width: '500rpx',
  height: '400rpx',
  views: [
    {
      type: 'image',
      url: 'https://gips3.baidu.com/it/u=1039279337,1441343044&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1024_1024',
      css: {
        width: "500rpx",
        height: "400rpx",
        top: "0",
        left: "0"
      }
    },
    {
      type: 'rect',
      css: {
        width: "500rpx",
        height: "80rpx",
        top: "320rpx",
        left: "0",
        color: 'linear-gradient(0deg, #EA5504 0%, #FF8800 100%)',
        borderRadius: '16rpx 16rpx 0 0'
      }
    },
    {
      type: "text",
      text: "15.90",
      css: {
        width: "260rpx",
        top: "330rpx",
        left: "50rpx",
        fontSize: "46rpx",
        color: "#FFFFFF",
        fontWeight: 'bold'
      }
    },
    {
      type: "text",
      text: "￥",
      css: {
        width: "260rpx",
        top: "350rpx",
        left: "20rpx",
        fontSize: "26rpx",
        color: "#FFFFFF",
        fontWeight: 'bold'
      }
    }
  ]
}