Use the Canvas API in the WeChat applet to synthesize the poster generation component package

After each mini program is formed, it is usually chosen to generate a poster with a chrysanthemum code and share it to attract more traffic. Let’s introduce another implementation method

Principle: Mainly use the powerful Canvas API of WeChat applet to synthesize. After generation, you can use wx.canvasToTempFilePath() to export the image address, so that you can preview and save it to Mobile photo album

1. How to use

to open the project folder

   1、 git  clone  https://github.com/WGinit/mini-poster.git

2. Register the component in the Json file of the page to be used

{ “usingComponents“:

  { “share-image“: “/components/share_image/share_image“ }

}

3. Use this component in the page

  <share–image

       drawDataList=“{{dataList}}“>

  </share–image>

2. Parameter configuration

dataList: {
    canvasData:{
      type: 'image',
      url: '',
      top: 0,
      left: 0,
      width: 750,
      height: 1334,
      comment: '背景图',
      btnText: '保存至相册'
    },
    content: [{
      type: 'image',
      url: '',
      top: 136,
      left: 100,
      shape: 'square',
      width: 290,
      height: 186,
      comment: '头像'
    }, {
      type: 'text',
      content: '白山羊',
      top: 336,
      left: 100,
      fontSize: 40,
      lineHeight: 40,
      color: '#f00',
      textAlign: 'left',
      weight: 'bold',
      maxWidth: 287
    }]
  }

3. Parameter description

canvasData------------canvas related parameters Configuration

##typeStringimage is the file type, here is the background image , the default imageurlString'' is network image addresstopNumber0NoThe position of the upper left corner of the image on the Y-axis in the visual area , unit pxleftNumber0NoThe upper left corner of the image is visible The position of the X-axis on the area, unit pxwidthNumber750Nocanvas The width of the canvas, in pxheightNumber1334NoThe height of the canvas, in units pxcommentString'Background image'NoPicture descriptionbtnTextString'Save to album'YesGenerate button text

content -------Draw content parameters

Parameter	Type	Default value	Required	Description

##ParametersTypeDefault valueRequiredDescriptiontypeString'' It is the type of drawing, optional image and textshapeString'square'NoDraw the shape of the picture, square, circleurlString''-The network address of the image, type is required for imagecontentString''-Text content, type is text requiredtopNumber0NoThe position of the upper left corner of the image on the Y-axis on the target canvas, in px##leftwidth##heightNumber100NoThe height of the drawn picture, unit pxStringNumberNumberStringStringStringNumber IV. RemarksThe above units are based on the design draft (750 * 1334), the actual situation can be directly based on the design draft Size configuration parameters.

NUmber	0	No	The position of the upper left corner of the image on the X-axis on the target canvas, unit px
Number	100	No	The width of the drawn picture, unit px
				##comment
' '	No	Instructions for drawing pictures		fontSize
32	No	Text font size, unit px		lineHeight
32	No	Text line height, unit px		color
'#FFFFFF '	No	Text font color		textAlign
'center'	No	Text level Alignment, optional left, center, right		weight
'normal'	No	Text font weight		maxWidth
600	No	Maximum width of text limit , unit px

Related articles:

JS and canvas synthesize pictures to make WeChat public account posters

WeChat applet Multiple file download encapsulation uses

The above is the detailed content of Use the Canvas API in the WeChat applet to synthesize the poster generation component package. For more information, please follow other related articles on the PHP Chinese website!