Puppeteer-based quick image generation function (previously shared based on GM implementation, found not flexible enough, with Puppeteer reconstruction)

Through the template created, quickly generate the corresponding pictures, for: automatic generation of marketing sharing pictures, batch generation of different TWO-DIMENSIONAL code pictures, etc

Introduction to a,

ImageTemplateGenerator (Puppeteer) is based on the Puppeteer implementation and basically renders a web page according to the configuration and returns a screenshot.

Download files to any directory and install dependencies:

$ git clone  -b puppeteer git://github.com/xiongwilee/imageTemplateGenerator.git imageTemplateGenerator
$ cd imageTemplateGenerator
$ npm installCopy the code

Execute the sample file:

$ cd example
$ node index.jsCopy the code

Merged image successfully:./merged. PNG! If yes, the operation succeeds. You can view the generated example/merged. PNG file.

Second, detailed description

1. Method of use

1) Install dependencies

$ npm install image-template-generator-webCopy the code

2) use

Usage:

const Itgw = require('image-template-generator-web');
Itgw(bgImg, { /* template config*/})
  .then((temp)=>{
    return temp.gen({/* item config */}, { /* options */ })
  })
  .then((result)=>{
    // result
  })Copy the code

Use 2:

const Itgw = require('image-template-generator-web');
Itgw(bgImg, { /* template config*/}, {/* item config */}, { /* options */ })
  .then((result)=>{
    // result
  })Copy the code

In addition, bgImg, template config, item config, options are specified below.

2. Detailed configuration

1) Generate a template

/ * * * imageTemplateGenerator: With the template you created, Joining together into a picture * * @ param {< String < Url > | String < Path > | Object < Request Config >} bg background picture * @ param * {Object} tempConf template configuration @return {Promise} */ Itgw(bgImg[, Template config])Copy the code

Such as:

const Itgw = require('image-template-generator-web'); const bgImg = '<String<Url>|String<Path>|Object<Request Config>' Itgw(bgImg, {/* template config*/}). Then ((temp)=>{// template config*/}).Copy the code

bgImg

The overall background image can be:

• String<Url>: Image link
• String<Path>: File system path of the image
• Object<Request Config>: requestjsRequest configuration, seeRequestjs configuration document

{logo: {size: '144,74', // the size of the image, separated by ", ", the first value is wide, the second value is high position: '+ 118 + 20', / / the location of the images, separated with "+" or "-", the first value is relative to the bgImg x axis deviation, the second value is relative to y axis, reference: https://github.com/aheckmann/gm default: / / the default 'http://img002.qufenqi.com/products/ac/04/ac04decbbd372b5289e1bf1be30fad99.png' images, as well as bgImg, can be: < String < Url > | String < Path > | Object < Request Config >}, title: {type: 'text', / / current element tag for text size: '320', the position: '+28+380', style: {// text style fontSize: '14px', color: '#333333'}, default: 'More products, please look forward to' // inline text}, slogan: {size: '343,56', position: '+14+430', default: path.resolve('.. /images/slogan. PNG ')}, qrcode: {size: '91,91', position: '+93+528', default: 'http://img003.qufenqi.com/products/cb/9f/cb9fbcf2eddb111b08ec6c0795900060.png' }, { // ... // This configuration can be added indefinitely. }}Copy the code

Text_example: {type: 'text', size: '320 ', position: '+28+380', // style: {// fontSize fontSize: '14px', // font style fontFamily: 'font name ', // fontWeight: 'bold', // color: '#333333' //... }, default: 'This is a text sample' // embedded text, need to be manually split by '\n'},Copy the code

2) Generate images from templates

** @param {Object} itemsConf * @param {Object} options * options.type write to Buffer * @return {Promise(<Buffer>)} Return Promise */ temp.gen(itemsConf[, options])Copy the code

Such as:

Temp. gen({/* item config */}, {/* options */}). Then ((data)=>{// data is returned based on options, default output Buffer})Copy the code

itemsConf

The generated image element is configured with the same key as the template config key (if the default is used, you do not need to configure the key), for example:

{ banner: 'https://img002.qufenqi.com/products/e0/af/e0afcc5a1350f4966f963bc0bff6aafa.jpg', title: 'Apple iPhone X (A1865) 64GB Deep Space Gray Mobile Unicom \ N Telecom 4G mobile phone ', logo: {method: 'GET', URL: 'https://www.baidu.com/img/bd_logo1.png', // body: JSON.stringify(postData), }, qrcode: path.resolve('.. /images/qrcode.png') }Copy the code

Key corresponding values, and bgImg consistent, including: < String < Url > | String < Path > | Object < Request Config >.

options

• height: Number, image height
• width: Number, image width
• path: String. If options is set to “Path”, you need to specify the Path for writing files to the file system

For details, see example/index.js.

3, TODO

Third, contribution

Welcome to issue, fork; If you have any questions, please contact xiongwilee[at]foxmail.com.