プレースホルダのイメージが必要でした.この動画はお気に入りから削除されています.いくつかのカスタムテキストを使用して、さまざまな色.少しの間、ウェブを捜した後に、私はちょうど私がしたかったことをしたサービスを見つけませんでした.😀

何をすべきか🤔

私はいくつかの指定されたパラメータで単一のPNGを生成するCLIを介して呼び出すことができるノードスクリプトを持っていた.私はその色、サイズ、テキスト、多分フォントを変えることができるべきです、そして、私はイメージが終わるところを定めることができなければなりません.それで私はいくつかのCLIパラメータを思いつきました.

--width (-w)  # Width of the image
--height (-h) # Height of the image
--red (-r)    # Red, 0-255
--green (-g)  # Green, 0-255
--blue (-b)   # Blue, 0-255
--text (-t)   # Text, defaults to "Lorem ipsum"
--font (-f)   # The font of the text, defaults to "sans-serif"
--output (-o) # Where the image would end up, defaults to "./image.png"

しかし、それは多くのパラメータのように聞こえます.幸運にも、多くのパラメータを扱うのに役立つ2つのパッケージがあります.command-line-args and command-ine-usage . それらはまさに私が必要としていたものでした.実装にオフ!

CLIスタッフの実装⌨️

それはかなりまっすぐだった.私は医者をちょっと読み、これを思いつきました.

// generate.js

#!/usr/bin/node

const commandLineArgs = require('command-line-args')
const commandLineUsage = require('command-line-usage')
const version = require('./package.json').version

const optionDefinitions = [
  { name: 'width', alias: 'w', type: Number, defaultValue: 640, description: 'Width of the image. Default: 640' },
  { name: 'height', alias: 'h', type: Number, defaultValue: 480, description: 'Height of the image. Default: 480' },
  { name: 'red', alias: 'r', type: Number, defaultValue: 255, description: 'Red part, 0-255. Default: 255' },
  { name: 'green', alias: 'g', type: Number, defaultValue: 255, description: 'Green part, 0-255. Default: 255' },
  { name: 'blue', alias: 'b', type: Number, defaultValue: 255, description: 'Blue part, 0-255. Default: 255' },
  { name: 'text', alias: 't', type: String, defaultValue: 'Lorem ipsum', description: 'Text to put on image. Default: "Lorem ipsum"' },
  { name: 'font', alias: 'f', type: String, defaultValue: 'sans-serif', description: 'Font the text will be rendered in. Default: "sans-serif"' },
  { name: 'output', alias: 'o', type: String, defaultValue: './image.png', description: 'Path of the image. Default: "./image.png"' },
  { name: 'help', type: Boolean, defaultValue: false, description: 'Prints this help' },
  { name: 'version', alias: 'v', type: Boolean, defaultValue: false, description: 'Prints the version' },
]
const options = commandLineArgs(optionDefinitions)

if (options.version) {
  console.log(version)
  return
}

if (options.help) {
  const sections = [
    {
      header: 'Placeholder image generator',
      content: 'Create placeholder images with a single line of bash!'
    },
    {
      header: 'Arguments',
      optionList: optionDefinitions
    },
    {
      header: 'Example',
      content: './generate.js -w 100 -h 100 -r 0 -g 0 -b 255 -t "Hello, World!" -f Helvetica -o ./placeholder.png'
    }
  ]

  const usage = commandLineUsage(sections)
  console.log(usage)

  return
}

実行./generate.js --help 今すぐ印刷します.

./generate.js --help

Placeholder image generator

  Create placeholder images with a single line of bash! 

Arguments

  -w, --width number    Width of the image. Default: 640                         
  -h, --height number   Height of the image. Default: 480                        
  -r, --red number      Red part, 0-255. Default: 255                            
  -g, --green number    Green part, 0-255. Default: 255                          
  -b, --blue number     Blue part, 0-255. Default: 255                           
  -t, --text string     Text to put on image. Default: "Lorem ipsum"             
  -f, --font string     Font the text will be rendered in. Default: "sans-serif" 
  -o, --output string   Path of the image. Default: "./image.png"                
  --help                Prints this help                                         
  -v, --version         Prints the version                                       

Example

  ./generate.js -w 100 -h 100 -r 0 -g 0 -b 255 -t "Hello, World!" -f Helvetica  
  -o ./placeholder.png    

驚くべき、それはまさに私が欲しかったものでした!

実際に画像を生成する🎨

これらのパラメータを使用すると、実際にプレースホルダイメージを生成することができます.ユーザーが指定するどんな色の上ででも読むことができるので、テキストの色は背景色の「反対」である必要があります.また、RGBではなく16進文字列として色を必要としました.そこで、これら二つの関数を作りました.

/**
 * Transforms R, G and B into a hex color string.
 * @param r
 * @param g
 * @param b
 * @returns {string}
 */
const colorToHex = (r, g, b) => '#' +
  (r.toString(16).padStart(2, '0')) +
  (g.toString(16).padStart(2, '0')) +
  (b.toString(16).padStart(2, '0'))

/**
 * Inverts a color and returns its hex value
 * @param r
 * @param g
 * @param b
 * @returns {string}
 */
const invertColor = (r, g, b) => colorToHex(
  (255 - r),
  (255 - g),
  (255 - b)
)

今、私はcanvas パッケージを作成します.

const width = options.width
const height = options.height
const color = colorToHex(options.red, options.green, options.blue)
const textColor = invertColor(options.red, options.green, options.blue)

const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')

context.fillStyle = color
context.fillRect(0, 0, width, height)
context.fillStyle = textColor
// height / 10 scales the font so it always looks nice!
context.font = `${height / 10}px ${options.font}`

const textSize = context.measureText(options.text)

context.fillText(options.text , (canvas.width / 2) - (textSize.width / 2), (canvas.height / 2))

... 使用fs イメージをハードディスクに書き込む

const buffer = canvas.toBuffer('image/png')
fs.writeFileSync(options.output, buffer)

すごい!少しのテストは、イメージが正しく生成されたことを示しました.

利便性の追加🛋️

ほとんど完了.私はアイデアがあったので:なぜスクリプトは、ユーザーのデフォルトのアプリケーションで画像を開くことはありませんか?process.platform とノードのexec このことを許してください

if (options.open) {
  let command = 'xdg-open' // Linux
  if (process.platform === 'win32') { // Windows
    command = 'start'
  }

  if (process.platform === 'darwin') { // OSX
    command = 'open'
  }

  exec(`${command} ${options.output}`)
}

そして、それはそうです:構成された色と自動的にスケールするテキストで構成されたサイズのイメージをつくるCLIツール!

なぜ待っているか。😯

オープンソースになったから!🚀 それを見つけることができますGitHub ( thormeier/generate-placeholder-image ) and npm ( generate-placeholder-image )
私はあなたがこの記事を読んで楽しんだことを願って私はそれを書いて楽しんだ!もしそうならば❤️ または🦄! 私はフリータイムでハイテク記事を書き、毎回コーヒーを飲みたいです.
あなたが私の努力を支持したいならば、考えてくださいbuying me a coffee ☕ または!