canvas2posterjs

v0.0.5

Published

2 years ago

canvas to poster

Downloads

0High
0Medium
0Low

coderly

canvas poster web

canvas2posterjs

draw with canvas，is faster then html2Canvas

usage

install

npm i canvas2posterjs -S

base

import CanvasToPoster from 'canvas2posterjs'
const paint = new CanvasToPoster({
  painting: {
    width: '550px',
    height: '876px',
    background: '#f4f5f7',
    views: []
  },
  immediate: true,
  imageType: 'jpeg',
  onSuccess(canvas) {
    document.body.append(canvas)
  },
  onError(err) {
    console.log(err)
  }
})

toImage

new CanvasToPoster({
  painting: {
    width: '550px',
    height: '876px',
    background: '#f4f5f7',
    views: []
  },
  immediate: true,
  imageType: 'jpeg'
}).toImage().then((image) => {
  document.body.append(image)
})

toBase64

new CanvasToPoster({
  painting: {
    width: '550px',
    height: '876px',
    background: '#f4f5f7',
    views: []
  },
  immediate: true,
  imageType: 'jpeg'
}).toBase64().then((base64) => {
  const image = new Image()
  image.src = base64
  document.body.append(image)
})

toCanvas

new CanvasToPoster({
  painting: {
    width: '550px',
    height: '876px',
    background: '#f4f5f7',
    views: []
  },
  immediate: true,
  imageType: 'jpeg'
}).toCanvas().then((canvas) => {
  document.body.append(canvas)
})

demo

import Canvas2Poster, { Painting } from 'canvas2posterjs'
const painting: Painting = {
  width: '750px',
  height: '1334px',
  background:
    'https://si.geilicdn.com/img-40d300000187ad60ace70a207569-unadjust_1125_2001.png?w=750',
  views: [
    {
      type: 'image',
      url: 'https://si.geilicdn.com/passport-0b67c6d7f6f35806c2107f1d030a93cf.jpg',
      css: {
        top: '95px',
        left: '327px',
        width: '102px',
        height: '102px',
        overflow: 'hidden',
        borderRadius: '50%'
      }
    },
    {
      type: 'text',
      text: '灶门家门口的小树苗灶门家门口的小灶门家门口的小树苗灶门家门口的小',
      css: {
        top: '218px',
        left: '103px',
        width: '544px',
        fontFamily: 'PingFangSC-Heavy',
        fontSize: '32px',
        color: '#FFFFFF',
        maxLines: 1,
        textAlign: 'center',
        fontWeight: '400'
      }
    },
    {
      type: 'image',
      url: 'https://si.geilicdn.com/img-589400000187ad66c7ca0a210349-unadjust_1125_1500.png',
      css: {
        top: '294px',
        left: '75px',
        width: '600px',
        height: '800px'
      }
    },
    {
      type: 'text',
      text: '2022年12月5日',
      css: {
        top: '430px',
        left: '160px',
        width: '430px',
        height: '38px',
        fontFamily: 'PingFangSC-Heavy',
        fontSize: '32px',
        color: 'rgba(0,0,0,0.40)',
        textAlign: 'center',
        fontWeight: '400'
      }
    },
    {
      type: 'text',
      text: '天生万物，',
      css: {
        top: '542px',
        left: '160px',
        width: '430px',
        lineHeight: '32px',
        fontFamily: 'PingFangSC-Heavy',
        fontSize: '32px',
        color: 'rgba(0,0,0,0.70)',
        textAlign: 'center',
        fontWeight: '600'
      }
    },
    {
      type: 'text',
      text: '谋望皆通，',
      css: {
        top: '622px',
        left: '160px',
        width: '430px',
        lineHeight: '32px',
        fontFamily: 'PingFangSC-Heavy',
        fontSize: '32px',
        color: 'rgba(0,0,0,0.70)',
        textAlign: 'center',
        fontWeight: '600'
      }
    },
    {
      type: 'text',
      text: '福德相助，',
      css: {
        top: '702px',
        left: '160px',
        width: '430px',
        lineHeight: '32px',
        fontFamily: 'PingFangSC-Heavy',
        fontSize: '32px',
        color: 'rgba(0,0,0,0.70)',
        textAlign: 'center',
        fontWeight: '600'
      }
    },
    {
      type: 'text',
      text: '瑞气匆匆，',
      css: {
        top: '782px',
        left: '160px',
        width: '430px',
        lineHeight: '32px',
        fontFamily: 'PingFangSC-Heavy',
        fontSize: '32px',
        color: 'rgba(0,0,0,0.70)',
        textAlign: 'center',
        fontWeight: '600'
      }
    },
    {
      type: 'text',
      text: '戳一戳👉',
      css: {
        bottom: '154px',
        left: '105px',
        lineHeight: '40px',
        fontFamily: 'PingFangSC-Heavy',
        fontSize: '28px',
        color: '#fff',
        fontWeight: '500'
      }
    },

    {
      type: 'text',
      text: '抽签今日幸运签🎐',
      css: {
        bottom: '102px',
        left: '105px',
        lineHeight: '37px',
        fontFamily: 'PingFangSC-Heavy',
        fontSize: '28px',
        color: '#fff',
        fontWeight: '400'
      }
    },
    {
      type: 'rect',
      css: {
        right: '92px',
        bottom: '92px',
        width: '116px',
        height: '116px',
        color: '#fff'
      }
    },
    {
      type: 'qrcode',
      content: 'https://github.com/coderlyu/canvas2Poster',
      css: {
        right: '96px',
        bottom: '96px',
        width: '108px',
        height: '108px'
      }
    }
  ]
}

new CanvasToPoster({
  painting,
  immediate: true,
  imageType: 'jpeg'
})
  .toCanvas()
  .then((canvas) => {
    document.body.append(canvas)
  })

效果

typescript helper

如果不了解每个 type 下的 css 都可以设置什么值，你可以借助 typescript 类型来帮助你(对外暴露了 Options, Painting )

import Canvas2Poster, { Options, Painting } from 'canvas2posterjs'
const painting: Painting = {
    width: '750px',
    height: '1414px',
    background:
      'https://si.geilicdn.com/img-111b0000018774e577790a2102d0-unadjust_1125_2121.png?w=750',
    views: [
      {
        type: 'image',
        url: 'https://si.geilicdn.com/passport-0b67c6d7f6f35806c2107f1d030a93cf.jpg',
        css: {
          top: '280px',
          left: '150px',
          width: '80px',
          height: '80px',
          borderRadius: '50%'
        }
      }
    ]
}
const options: Options = {
    painting: painting,
    immediate: true,
    imageType: 'jpeg'
}
const paint = new Canvas2Poster(options)

API

CanvasToPoster options

| 属性名 | 类型 | 说明 | 默认值 | | --------- | -------------- | ------------------------------ | ----- | | painting | object | canvas上绘制内容的json描述，见下方 | | | immediate | boolean | 是否在new CanvasToPoster的时候立即生成海报 | false | | imageType | 生成base64的图片类型， | 默认jpeg，若支持webp，将会使用webp格式 | '' | | onSuccess | 海报成功的回调 | | | | onError | 海报失败的回调 | | |

methods

| 方法名 | 入参 | 说明 | | ---------- | ---------------------- | --------------------------------------------------------------- | | startPaint | CanvasToPoster options | 在new CanvasToPoster 时，未设置immediate: true，可手动调用该方法同时传入最新的options |

painting 对象

具体信息见下方

painting(画布props)

| 属性名称 | 类型 | 说明 | 默认值 | | ------------ | ------ | ------------------------ | --- | | background | string | 画布背景，可以是颜色值或者图片的链接，支持渐变色 | 白色 | | width | string | 画布的宽度，单位px | | | height | string | 画布的高度，单位px | | | borderRadius | string | 边框的圆角 | 0px | | views | array | 数组，包含一系列对象，见下一节元素vies | |

view props

| 属性名 | 类型 | 说明 | 默认值 | 是否必须 | | ------- | ------ | ---------------------------------- | --- | ------------------ | | type | string | view的类型（text, image, rect, qrcode） | 无 | 是 | | text | string | 文本内容（type===text） | 无 | type=== text下必须 | | url | string | 图片(type===image) | 无 | type === image下必须 | | content | string | 用改链接生成二维码（type === qrcode） | 无 | type === qrcode下必须 |

text css

| 属性名称 | 类型 | 说明 | 默认值 | | -------------- | ------ | ------------------------------------------------------------------------------------------------------ | ----------- | | fontSize | string | 字体大小 | 20px | | color | string | 字体颜色 | black | | width | string | 换行宽度，当文字长度大于width，换行 | | | maxLines | number | 最大行数 | 不限，根据width来 | | lineHeight | string | 行高(上下两行文字baseline的距离) | fontSize大小 | | fontWeight | string | 字体粗细，'normal','blod','bolder','lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900' | normal | | textDecoration | string | 文本修饰，支持underline, overline,line-through, 也可组合使用 | | | textStyle | string | fill：填充样式，stroke：镂空样式 | fill | | fontFamily | string | 字体，需引入字体 | sans-serif | | background | string | 文字背景颜色 | | | padding | string | 文字背景颜色边际与文字间距 | 0px | | textAlign | string | 文字的对齐方式，分为left, center, right, view的对齐方法请看align属性 | left | | textIndent | string | 文字首行缩进 | 0px |

image css

| 属性名 | 类型 | 说明 | 默认值 | | ------ | ------ | ----------------------------------------------------------------------------------------------------------------------------------- | ---------- | | width | string | image的宽度 | auto | | height | string | image的高度 | auto | | mode | string | 图片裁剪、缩放的模式(scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素; aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。) | aspectFill |

qrcode css

| 属性名 | 类型 | 说明 | 默认值 | | ------ | ------ | ----- | ----- | | color | string | 二维码颜色 | black | | width | string | 二维码宽度 | | | height | string | 二维码高度 | |

rect css

| 属性名 | 类型 | 说明 | 默认值 | | ------ | ------ | ---- | ----- | | color | string | 矩形颜色 | black | | width | string | 矩形宽度 | | | height | string | 矩形高度 | |

Questions

ts类型不兼容

如果遇到ts类型不兼容的问题，一般是传入 options 的 painting 报错，你可以从 canvas2posterjs 引入 Painting 或者 Options，如下示例

import Canvas2Poster, { Options, Painting } from 'canvas2posterjs'
const painting: Painting = {
    width: '750px',
    height: '1414px',
    background:
      'https://si.geilicdn.com/img-111b0000018774e577790a2102d0-unadjust_1125_2121.png?w=750',
    views: [
      {
        type: 'image',
        url: 'https://si.geilicdn.com/passport-0b67c6d7f6f35806c2107f1d030a93cf.jpg',
        css: {
          top: '280px',
          left: '150px',
          width: '80px',
          height: '80px',
          borderRadius: '50%'
        }
      }
    ]
}
const options: Options = {
    painting: painting,
    immediate: true,
    imageType: 'jpeg'
}
const paint = new Canvas2Poster(options)

import Canvas2Poster, { Painting } from 'canvas2posterjs'
const painting: Painting = {
    width: '750px',
    height: '1414px',
    background:
      'https://si.geilicdn.com/img-111b0000018774e577790a2102d0-unadjust_1125_2121.png?w=750',
    views: [
      {
        type: 'image',
        url: 'https://si.geilicdn.com/passport-0b67c6d7f6f35806c2107f1d030a93cf.jpg',
        css: {
          top: '280px',
          left: '150px',
          width: '80px',
          height: '80px',
          borderRadius: '50%'
        }
      }
    ]
}
new Canvas2Poster({
  painting: painting,
  immediate: true,
  imageType: 'jpeg'
})

import Canvas2Poster, { Painting } from 'canvas2posterjs'
const painting = {
    width: '750px',
    height: '1414px',
    background:
      'https://si.geilicdn.com/img-111b0000018774e577790a2102d0-unadjust_1125_2121.png?w=750',
    views: [
      {
        type: 'image',
        url: 'https://si.geilicdn.com/passport-0b67c6d7f6f35806c2107f1d030a93cf.jpg',
        css: {
          top: '280px',
          left: '150px',
          width: '80px',
          height: '80px',
          borderRadius: '50%'
        }
      }
    ]
}
new Canvas2Poster({
  painting: painting as Painting,
  immediate: true,
  imageType: 'jpeg'
})

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

canvas2posterjs

usage

install

base

toImage

toBase64

toCanvas

demo

typescript helper

API

CanvasToPoster options

methods

painting 对象

painting(画布props)

view props

text css

image css

qrcode css

rect css

Questions

ts类型不兼容