Canvas2posterjs NPM

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'
})

canvas poster web

@everything-registry/sub-chunk-1291

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago