canvas-poster-sprite

A poster plugin that can draw texts, paths and pictures to canvas, and export picture data.

Introduction | 简体中文

• Multiterminal support：web-h5 | uni-app | wx-miniprogram | my-miniprogram | tt-miniprogram | swan-miniprogram | qq-miniprogram
• Canvas support：draw texts, paths and pictures to canvas
• Canvas z-index：pictures(preload=true) < paths < pictures < texts

Notes | Update

• Text does not support art form, art form can be replaced by pictures.
• Pictures resources support | HTTPS (HTTP attention to the problem of cross domain), only the web side support local resources (local service, please use the require import).
• Pictures(preload=true)，can be first drawed to canvas.
• The width and height of the canvas should be the same as the width and height of the poster image, so that the final composite image will not have excess white space.
• The quality of exported images can be controlled through fields FileType and Quality. Generally, the quality of JPEG images is relatively low.
• Inside uni, we call uni's API, it should be support app-vue, web and miniprogram.

Useage

• install：npm i canvas-poster-sprite or yarn add canvas-poster-sprite
• web：import CanvasPosterSprite from 'canvas-poster-sprite'
• uni：import CanvasPosterSprite from 'canvas-poster-sprite/dist/uni-canvas-poster-sprite.js'
• wx：import CanvasPosterSprite from 'canvas-poster-sprite/dist/wx-canvas-poster-sprite.js'
• my：import CanvasPosterSprite from 'canvas-poster-sprite/dist/my-canvas-poster-sprite.js'
• tt：import CanvasPosterSprite from 'canvas-poster-sprite/dist/tt-canvas-poster-sprite.js'
• swan：import CanvasPosterSprite from 'canvas-poster-sprite/dist/swan-canvas-poster-sprite.js'
• qq：import CanvasPosterSprite from 'canvas-poster-sprite/dist/qq-canvas-poster-sprite.js'
• instance：new CanvasPosterSprite(setting)

new CanvasPosterSprite({
  /* uni|wx|my|tt|swan|qq */
  self: this, 
  canvasId: 'canvas-id',

  /* web|uni|wx|my|tt|swan|qq */
  width: 900,
  height: 1600,
  bgColor: '#dddddd',
  paths : {
    circle : [
      {x: 214, y: 1123, w: 56, h: 56, r: 28, type: "fill", color: "#ffffff"}
    ],
    rect : [
      {x: 324, y: 1209, w: 252, h: 252, type: "fill", color: "#e6e6e6"},
      {x: 325, y: 1210, w: 250, h: 250, type: "fill", color: "#ffffff"},
      {x: 206, y: 1117, w: 488, h: 68, r: 34, type: "fill", color: "rgba(0, 0, 0, .15)"},
      {x: 376.5, y: 1520.5, w: 152, h: 44, r: 22, lineWidth: 4, color: "#000000"}
    ],
    triangle : [
      {points : [{x: 450, y: 1198}, {x: 462, y: 1185}, {x: 439, y: 1185}], type: "fill", color: "rgba(0, 0, 0, .15)"}
    ],
    line : [
      {x1: 360, y1: 1490.5, x2: 400, y2: 1490.5, lineWidth: 2, color: "#000000"},
      {x1: 505, y1: 1490.5, x2: 545, y2: 1490.5, lineWidth: 2, color: "#000000"}
    ]
  },
  /*pics : [
    {x: 0, y: 0, w: 900, h: 1600, preload: true, src: "./img/bg-zm.jpg"},
    {x: 328, y: 1213, w: 244, h: 244, src: "./img/qrcode-zm.png"},
    {x: 215, y: 1124, w: 54, h: 54, r: 27, src: "./img/icon.jpeg"}
  ],*/
  texts: [
    {x: 280, y: 1152, font: "26px 微软雅黑", color: "#FFE506", text: "小小咖侠侣店"},
    {x: 436, y: 1152, font: "26px 微软雅黑", color: "#ffffff", text: "邀请你注册侠侣联盟"},
    {x: 328, y: 1493, w: 250, font: "24px 微软雅黑", align: "center", color: "#000000", text: "邀 请 码"},
    {x: 328, y: 1543, w: 250, font: "28px Arail", align: "center", color: "#000000", text: "3ZGVTV"}
  ]
}).then((err, res)=>{
   if(err){
     console.log("canvas-fail：", err);
     return;
   }
   let { tempFilePath, canvas } = res;
   console.log("canvas-success：", res);
})

examples

• screenshot
• web：examples/index.html
• uni：examples/components/uni-canvas
• wx：examples/components/wx-canvas
• my：examples/components/my-canvas
• tt：examples/components/tt-canvas
• swan：examples/components/swan-canvas
• qq：examples/components/qq-canvas

Configuration

• let spriter = new CanvasPosterSprite(options)
• options
• web | uni | wx | my | tt | swan | qq

param	type	require	default	desc
width	Number	--	640	canvas width.
height	Number	--	640	canvas height.
bgColor	String	--	#fff	canvas background color.
fileType	String	--	jpeg	type of pictures. eg.jpeg、png、gif
quality	Number	--	1	quality of pictures.
pics	Array	--	--	pictures. More
paths	Object	--	--	paths. More
texts	Array	--	--	texts. More

• uni | wx | my | tt | swan | qq

param	type	require	default	desc
self	Object	yes	--	content - this
canvasId	String	yes	--	canvas-id

• uni

param	type	require	default	desc
appPlus	Boolean	--	false	app，whether transform pictures to base64 first，and draw to canvas，fix：Android10 uni.canvasToTempFilePath Error.
pixelRatio	Number	--	2	app pixelRatio.

• spriter

method	desc
spriter.then(callback)	callback(err, res)