mp-cover-layer

支持微信小程序和支付宝小程序的canvas图片合成工具

Usage

<canvas class="canvas" id="canvas-id" width="750" height="1206" ></canvas>

import CoverLayer from 'mp-cover-layer'
const cl = new CoverLayer({
  clientType: 'weapp' // alipay
})
cl.init('#canvas-id')
// put some elements step by step
await cl.putImg({
  img: 'https://shomwhere/images/background.png',
  x: 0,
  y: 0,
  width: 750,
  height: 750
})
await cl.putText({
  text: 'your text',
  x: 233,
  y: 233,
  fontSize: 32
})


// output your result in base64
const result = await cl.canvasToDataUrl()
// output your result in filepath
const tempFilePath = await cl.toTempFilePath()

API

putFillRect(options)

放置一个矩形 参数: |参数名|默认值|描述| |---|---|---| background|#fff|填充色| width|0|宽度| height|0|高度| x|0|相对于左上角x轴定位| y|0|相对于左上角y轴定位| rotate|0|旋转角度

await cl.putFillRect({
  background: '#fff'
  width: 750
  height: 1334
})

putImg(options)

放置一个图片 参数: |参数名|默认值|描述| |---|---|---| img||图片的路径或者是图片的DOM对象 width|0|宽度| height|0|高度| x|0|相对于左上角x轴定位| y|0|相对于左上角y轴定位| rotate|0|旋转角度

await cl.putImg({
  img: 'https://shomwhere/images/img.png',
  x: 10,
  y: 10,
  width: 100,
  height: 100,
  rotate: 90
})

putCircularImg(options)

放置一个裁切成圆形的图片 参数: |参数名|默认值|描述| |---|---|---| img||图片的路径或者是图片的DOM对象| width|0|宽度| height|0|高度| x|0|相对于左上角x轴定位| y|0|相对于左上角y轴定位| rotate|0|旋转角度

await cl.putCircularImg({
  img: 'https://shomwhere/images/img.png',
  x: 10,
  y: 10,
  width: 100,
  height: 100,
  rotate: 90
})

putText(options)

放置文字

参数: |参数名|默认值|描述 |---|---|---| text||文字| x|0|相对于左上角x轴定位| y|0|相对于左上角y轴定位| rotate|0|旋转角度| fontSize|12|字体大小| textBaseline|middle|文字的基线| fontColor|#000|字色| align|对齐方式| left,center,right| fontWeight|normal|规定字体的粗细。可能的值:normalboldbolderlighter100200300400500600700800900| fontFamily|sans-serif|字体

    // 放置一个旋转90度的文字,设置字色和字体大小
    await cl.putText({
      text: '23333',
      x: 200,
      y: 120,
      rotate: 90,
      fontSize: 30,
      color: '#666'
    })

putParagraph(options)

放置段落,可自动换行

参数: |参数名|默认值|描述 |---|---|---| text||文段 x|0|相对于左上角x轴定位| y|0|相对于左上角y轴定位| width|200|最大宽度,超出宽度会自动换行| fontSize|12|字体大小| lineHeight| 1.2| 行高| textBaseline|middle|文字的基线| fontColor|#000|字色| align|对齐方式| left,center,right| fontWeight|normal|规定字体的粗细。可能的值:normalboldbolderlighter100200300400500600700800900| fontFamily|sans-serif|字体

// 超出width的部分会自动换行
// 可通过↵或者 \n 或者 | 进行自定义换行
    await cl.putParagraph({
      text: '君不见，黄河之水天上来，奔流到海不复回。|君不见，高堂明镜悲白发，朝如青丝暮成雪。↵人生得意须尽欢，莫使金樽空对月。↵天生我材必有用，千金散尽还复来。↵烹羊宰牛且为乐，会须一饮三百杯。↵岑夫子，丹丘生，将进酒，杯莫停。↵与君歌一曲，请君为我倾耳听。↵钟鼓馔玉不足贵，但愿长醉不愿醒。↵古来圣贤皆寂寞，惟有饮者留其名。↵陈王昔时宴平乐，斗酒十千恣欢谑。↵主人何为言少钱，径须沽取对君酌。↵五花马，千金裘，↵呼儿将出换美酒，与尔同销万古愁。',
      x: 220,
      y: 100,
      width: 250,
      fontSize: 14
    })

canvasToDataUrl(type, value)

获取最终图片的base64 参数: |参数名|默认值|描述| |---|---|---| type|image/jpeg|输出格式| value|1|输出精度(0.1-1)|

let img = await cl.canvasToDataUrl()

toDataUrl(type, value)

同canvasToDataUrl 参数: |参数名|默认值|描述| |---|---|---| type|image/jpeg|输出格式| value|1|输出精度(0.1-1)|

let img = await cl.toDataUrl()

toTempFilePath(type, value)

输出临时路径,用于保存图片 参数: |参数名|默认值|描述| |---|---|---| type|png|输出格式| value|1|输出精度(0.1-1)|

let img = await cl.toTempFilePath()