The front-end generated

Using WXA-plugin-Canvas, the demo implementation is relatively simple, but if the image is a link, it must be HTTPS.

Hypertext transfer protocol secure (HTTPS) images are charged in addition to HTTP to save costs

The Node to generate

There are also several ways to generate node. For comprehensive comparison of function and performance, SHARP is selected, but sharp 0.1 to 0.2 is a breaking change. The previous online blog is no longer used, so some holes are summarized.

You can use sharp to add layers on top of each other.

  1. Head layer
// Avatar radius
const avatarWidth = 150

// Head round SVG
const roundedCorners = Buffer.from(
    `<svg><circle r="${avatarWidth}" cx="${avatarWidth}" cy="${avatarWidth}"/></svg>`
  )

/** Head layer data *@param {(Buffer|string)} AvatarData can be a file path or a buffer */ to retrieve images
const avatarBuffer = yield sharp(avatarData)
  .resize(avatarWidth, avatarWidth)
  .composite([{ input: roundedCorners, blend: 'dest-in' }])
  .png()
  .toBuffer({
    resolveWithObject: true
  })

Copy the code
  1. Text layer

Text-to-svg is required to assist in generation

const TextToSVG = require('text-to-svg')
// Load the font file
const textToSVG = TextToSVG.loadSync(path.join(__dirname, '.. /font/kuaile.ttf'))
const nameSvgOptions = {
  x: 0.y: 0.fontSize: 32.anchor: 'top'.attributes: { fill: '#fff'}}const nameSvg = textToSVG.getSVG(name, nameSvgOptions)

// Add a rounded background to the text
const nameWidth = textToSVG.getWidth(name, {fontSize: 60})
const roundedRect = Buffer.from(
  `<svg><rect x="0" y="0" width="${nameWidth}" height="40" rx="20" ry="20" fill="#fdbc5e"/></svg>`
)
const catNameBuffer = yield sharp(roundedRect)
  .composite([{ input: Buffer.from(catNameSvg), blend: 'overlay' }])
  .png()
  .toBuffer({
    resolveWithObject: true
  })

Copy the code
  1. Merge layers (highlight!)
// Background image
const backgroudBuffer = yield sharp(path.join(__dirname, '.. /images/share.png'))
  .png()
  .toBuffer({
    resolveWithObject: true
  })

// 0.2 is changed to an array, which is much easier to use than 0.1 chain calls
yield sharp(backgroudBuffer.data)
  .composite([
    { input: avatarBuffer.data, top: 570.left: 105 },
    { input: nameBuffer.data, top: 780.left: 320 },
  ])
  .toBuffer({
    resolveWithObject: true
  })
Copy the code

Finally, pass it to the applet as base for processing resimg.data.tostring (‘base64’)

Problems encountered:

  • The text rotates with a black background

Add background transparency to Rotate

const resImg = yield sharp(Buffer.from(labelSvg))
  .rotate(15, {background: { r: 0.g: 0.b: 0.alpha: 0 }})
  .png()
  .toBuffer({
    resolveWithObject: true
  })
  
Copy the code
  • Description Sharp fails to be installed on the deployment server
npm config set sharp_binary_host "https://npm.taobao.org/mirrors/sharp"
npm config set sharp_libvips_binary_host "https://npm.taobao.org/mirrors/sharp-libvips"
npm install sharp
Copy the code

Attached is the effect picture:

Reference documentation

sharp

Node.js image synthesis for minor mischief