auto-image-watermark

海报生成 H5 端 SDK

安装说明

npm install auto-image-watermark

快速使用

import {create} from 'auto-image-watermark';
const H5 = create({
      width: 375,
      height: 600,
      backgroundColor: '#fff',
      debug: false,
      pixelRatio: 2,
      blocks: [{
          width: 650,
          height: 300,
          x: 1,
          y: 2,
          borderWidth: 4,
          borderColor: '#000',
          borderRadius: 30,
          backgroundColor: '#fff',
          text: {
            text: [{
                x: 12,
                y: 40,
                text: '块中的文字',
                fontSize: 35,
                color: '#f00',
                width: 300
              },
              {
                x: 182,
                y: 90,
                text: '过长文字缩略',
                fontSize: 35,
                color: '#f76',
                width: 300
              }
            ]
 
          },
          zIndex: 1
        },
        {
          width: 650,
          height: 200,
          x: 10,
          y: 400,
          borderWidth: 6,
          borderColor: '#ff00ff',
          borderRadius: 50,
          backgroundColor: '#ff0',
          opacity: 0.5,
          zIndex: 2
        },
      ],
      lines: [{
        startX: 250,
        startY: 250,
        endX: 550,
        endY: 250,
        width: 9,
        color: 'green',
        zIndex: 128
      }],
      texts: [{
        x: 113,
        y: 132,
        text: 'hello world',
        fontSize: 57,
        baseLine: 'middle',
        textAlign: 'left',
        color: 'rgba(255,0,0)',
        zIndex: 8
      }, ],
      images: [{
          width: 276,
          x: 74,
          y: 170,
          borderRadius: 12,
          borderColor: '#f30',
          borderWidth: 4,
          url: 'https://lc-I0j7ktVK.cn-n1.lcfile.com/02bb99132352b5b5dcea.jpg',
          zIndex: 40
        }
      ]
    });

API

create(config) => Promise<{base64:string}>;

create 参数说明

参数	必填	类型	说明
width	是	Number	画布宽度
height	是	Number	画布高度
backgroundColor	否	String	画布背景色
blocks	否	Array	绘制块 ，具体参见blocks参数详解
lines	否	Array	绘制线 ，具体参见lines参数详解
texts	否	Array	绘制文字 ，具体参见texts参数详解
images	否	Array	绘制图片 ，具体参见images参数详解

blocks 参数说明

参数	必填	类型	说明
x	是	Number	块的横坐标
y	是	Number	块的纵坐标
width	是	Number	块宽度
height	是	Number	块高度
backgroundColor	否	String	块背景色
borderWidth	否	Number	边框宽度
borderColor	否	String	边框颜色
borderRadius	否	Number	圆角
text	否	Object	块里面可以填充文字，text.text参考texts字段解释
zIndex	否	Number	层级，越大越高

lines 参数说明

参数	必填	类型	说明
startX	是	Number	起始横坐标
startY	是	Number	起始纵坐标
endX	是	Number	终点横坐标
endY	是	Number	终点纵坐标
width	是	Number	线的宽度
color	否	String	线的颜色
zIndex	否	Number	层级，越大越高

texts 参数说明

参数	必填	类型	说明
x	是	Number	文字横坐标
y	是	Number	文字纵坐标
text	是	Number	文字内容
fontSize	是	Number	文字大小
color	否	String	文字颜色
opacity	否	Number	文字透明度
width	否	Number	文字最大宽度
baseLine	否	String	top|bottom|middle|alphabetic|hanging 基线对齐方式
textAlign	否	String	start|end|left|center|right 对齐方式
fontFamily	否	String	文字字体
fontWeight	否	String	文字加粗
fontStyle	否	String	文字倾斜
zIndex	否	Number	层级，越大越高

images 参数说明

参数	必填	类型	说明
x	是	Number	图片横坐标
y	是	Number	图片纵坐标
url	是	String	图片地址
width	否	Number	图片宽度
height	否	Number	图片高度
borderWidth	否	Number	边框宽度
borderColor	否	String	边框颜色
borderRadius	否	Number	圆角
zIndex	否	Number	层级，越大越高

注意事项

1.zIndex代表block、image、line、text之间的层级关系，层级越大，显示层级在越靠上; 2.blocks中的text的zIndex无效; 3.images中需要生成圆形图片则设置图片width、height、borderRadius三者相等即可; 4.单位统一(px);

CHANGELOG

V1.0.1

1. 新增圆形block，优化生成圆形图片方式；
2. 优化文字宽度省略问题；
3. 优化画布和画板的高宽；

V1.0.0

1. 海报生成sdk-h5端；