Uni-app poster generation plug-in – Painter

Small program poster generation plug-in – Painter

Poster generation tool

  • Quickly generate posters, direct export code, no more desperately compatible, helpless debugging
  • If you want to import the exported JSON to view the effect, you need to reformat and compress the JSON.

Shortcut:

  • ‘←’ moves one pixel to the left
  • Move ‘→’ one pixel to the right
  • ‘↑’ moves up one pixel
  • ↓ moves down 1 pixel
  • ‘CTRL + Z’ undo
  • ‘CTRL + Y’ resumes
  • ‘delete’ to delete
  • The ‘[‘ raises the level of the element
  • ‘] ‘lowers the level of the element

Use method in UNIAPP

  • Save the JSON code exported from the poster generation tool above
  • Go to the Github plugin documentation github.com/Kujiale-Mob…
  • Download the Components/Painter file from the components/ Painter directory
  • Create a new wxComponents folder in your local project and copy in the downloaded Painter folder
  • Add the import path under the globalStyle property in the local project pages. Json
"globalStyle": {
	"usingComponents": {"painter":"/wxcomponents/painter/painter"}}Copy the code
  • The incoming parameter component initializes the automatically generated Canvas image where needed
<painter
	@imgOK="onImgOk"
	@imgErr="onImgErr"
	widthPixels="750"
	:customStyle="customStyle"
	:palette="template"
/>
Copy the code
  • The JSON code passed to the palette => template
  • OnImgOk poster generated successfully callback function, e.daily. path to get the generated image
  • The onImgErr poster generates a failed callback function
  • WidthPixels forces you to specify the pixel width of the generated image. Otherwise, adjust dynamically based on the size you set in your canvas. This property improves image resolution.
  • CustomStyle Sets the generated Canvas image style

The image address successfully generated in onImgOk is the image that should be displayed. Canvas image can be hidden by setting style

card.js

  • Create card.js where appropriate and copy in the JSON code generated by the tool above
  • Import Card from ‘directory/Card’
  • This. Template = new Card(cardInfo) assignment cardInfo custom incoming arguments that can be used in card.js to process the generated JSON object

About the dynamic generation of small program code, need back-end support, through wx. DownloadFile download down, and then add parameters to generate posters