nodejs作成画像

前言
完成した小さいプログラムは共有機能を実現するために、私は共有機能を異なるページによって三つに分けました.共有の内容はすべて動的に定義されています.また、WeChatは画像共有のモードだけをサポートしていますので、ここでは後端を使って共有の内容を動的に画像に書き入れて、最後に七牛雲にアップロードして、一つの画像アドレスに戻ります.
リーダーページ共有
章を読む時に共有を選択し、共有する写真の展示すべき情報には、書籍の表紙、書籍の名称、章の名称、および章の内容が含まれています.
本の詳細ページを共有する
シェアした写真の展示すべき情報には、書籍の表紙、書籍の名前、著者、書籍の種類、および書籍の紹介が含まれています.これはまだ開発中です.
プログラムのトップページを共有する
この機能は、バックグラウンド管理システムに参加して、管理者がカスタマイズして共有できるようにしたいです.
具体的に実現する
そんなに多いと言って、直接にコードを絞る方法を見てください.nodeカスタムについて画像を生成して、node-canvasといいます.よくあるdrawImage、fillText、fillrectなど、nodeの中でブラウザのように画像を描くことができます.nodeを使って画像を描くのは大きな問題ではないですが、肝心なのはどのように描きますか?
node-canvasをインストールします

#       
# ubuntu
sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++
# mac OS
brew install pkg-config cairo libpng jpeg giflib

#   canvas
npm install canvas

インストールに問題がありました.またはnode-canvasに関する情報をもっと知りたいです.githubのトップページを見てください.
基礎となる応用
例えばnode-canvasで文字を描きます.

import Canvas  from 'canvas'

const canvas = new Canvas(300, 120) //         ，   5:4
const context = canvas.getContext('2d')
ctx.font = '14px "Microsoft YaHei"' //           
context.fillText('Hellow', 84, 24, 204)

fillTextは4つのパラメータを受け入れ、最初は描画するテキスト、2番目と3番目のパラメータは描画の開始位置のxとy座標を定義し、4番目のパラメータは描画テキストの最大幅maxWidthを制御するために使用されます.絵を描きたいです.位置情報は自分で計算します.
drawImageの説明
本の表紙画像を描く時はドラフト方法に使いますが、node-canvasのdrawImage方法は、画像パラメータを渡す時にはBufferタイプしか受信しないので、ここでは、ネットワーク画像(データベースから取り出した表紙画像アドレス、例:)をBufferタイプに変換する方法について説明します.httpsの内蔵カバンを使って、表紙の写真の住所をhttpの内蔵カバンでお願いします.パッキング要求データの後、Buffer.co ncatを使ってBufferタイプに変えます.また、koaのrouterに書かれているコードなので、このような非同期型の操作にはPromiseが必要です.

return new Promise((resolve, reject) => {
  //        buffer  ，  canvas    
  https.get(thisBook.img_url, imgRes => {
    let chunks = [] //                    
  　　             let size = 0 //           
    imgRes.on('data', chunk => {
      /**
        *         ，        (           )
        * node                   （Buffer）
        *                 （ Buffer  ）
        *  Buffer                （             ），
        *                     ，                ，
        *             ，     ，            chunks   ，
        *      node.js   Buffer.concat()      
        */
      chunks.push(chunk)
      size += chunk.length
    })
    imgRes.on('end', err => {
      if (err) {
        ctx.body = { ok: false, msg: '          ' }
        reject('          ')
        return
      }
      const buffer = Buffer.concat(chunks, size)
      //        buffer  
      if (Buffer.isBuffer(buffer)) {
        //     canvas  ....
      } else {
        ctx.body = { ok: false, msg: '          ' }
        reject('          ')
        return
      }
    })
  })
})

fillTextの説明
これを前提として、fillTextメソッドに行くと、maxWidthというパラメータが適用されます.描画したテキストがこの幅を超えると自動的に改行されます.もともとこのデザインはいいですが、実際に使ってみると、自動改行の高さが大きいです.また、context.fontを通じても、コントロールラインの高さができませんでした.なぜなら、ラインheightとfont-sizeはcontext.fontの中で同じパラメータです.こうなった上は、自分で方法を考えるしかない.行の高さを制御できないと、テキストを1行ずつ描画し、描画時に入ってくる開始位置のy座標を使って、2行の間隔を制御することができます.

//                          
const noSpaceContent = thisBook.chapters[0].content.replace(/(
|\t|\r)/g, '')
//   canvas measureText           ，                       
const oneTextWidth = context.measureText(' ').width
const oneLineMaxTextNumber = Math.ceil(204 / oneTextWidth)
//         
let maxLineNumber = 4
//     
let current = 4
while (current > 0) {
  let tmpText = noSpaceContent.substring(oneLineMaxTextNumber * (maxLineNumber - current), oneLineMaxTextNumber * (maxLineNumber + 1 - current))
  //            
  if (current === 1) {
    tmpText = tmpText.substring(0, tmpText.length - 2) + '...'
  }
  context.fillText(tmpText, 84, 62 + (maxLineNumber - current) * 15, 204)
  current --
}

写真は七牛雲をアップロードします.
ここで使っているQnのカバンは、みんな公式サイトに行ってみたらどうやって使うか分かります.忘れないようにコードを貼ります.まずconfig.jsに配置します.

const config = {
    accessKey: 'xxx', //     key ，https://portal.qiniu.com/user/key
    secretKey: 'xxx',
    bucket: 'upload', //    
    isUseHttps: true, //    https，          ，     https://github.com/gpake/qiniu-wxapp-sdk/blob/master/README.md
}

module.exports = config;

そして7牛の配置を初期化します.

import config from '../config'
import qn from 'qn'

// qiniu    
const client = qn.create({
  accessKey: config.accessKey,
  secretKey: config.secretKey,
  bucket: 'upload',
  origin: 'https://fs.andylistudio.com',
});

七牛雲は直接地元の画像をアップロードすることができます.直接に写真のブザーの対象にもなります.私達はnode-canvasが提供するtoBufferの方法を使って直接に私達が描いたcanvasをブザーの対象に変えてアップロードします.

//         
client.upload(canvas.toBuffer(), {key: 'mbook/share/' + uuid.v1() + '.png' }, function (err, result) {
  if (err) {
    ctx.body = { ok: false, msg: '        ' }
    reject('        ')
    return
  }
  ctx.body = { ok: true, msg: '        ', url: result.url }
  resolve(next())
})

効果図
感じは大丈夫ですか?ハハ～、完全コードはここを参考にしてください.
終了
原文を確認してくださいhttps://andyliwr.github.io/2018/04/23/node_canvas_ユーザー/