画像が奇数ピクセルだとスマホ表示でにじむので、偶数に変更するnodeスクリプト

奇数ピクセルだとスマホ表示でにじんだり、Chromeでtext-align:centerしているときにフェードするとビクっとしたりします。

Slicyでオシャレにスライスを自動化していると、奇数ピクセルのスライスになったりします。

いちいちPhotoshopでスライスしなおしたりするのはめんどくさいです。

それをImageMagickでちゃちゃっとやってもらいましょう！

使い方

• 要ImageMagick
• package.jsonからnpm install
• convert.coffee を置いて、適当なpngへのパスを渡してください！

 coffee convert.coffee -i hogehoge/*.png

package.json

{
  "name": "setEvenPixel",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "katapad",
  "license": "none",
  "devDependencies": {
    "imagemagick": "~0.1.3",
    "optimist": "~0.6.0"
  },
  "dependencies": {}
}

convert.coffee

###
  set even pixel

  @use
  https://github.com/rsms/node-imagemagick

  @see
  画像処理についてあれこれ: ImageMagickで、画像の上下左右に余白を追加する
  http://goo.gl/kVfP9Q

###
argv = require('optimist').argv
if not argv.i
  console.log 'file not found'
  return

if argv.i
  fileList = [argv.i]
if argv._
  fileList = fileList.concat(argv._)
if fileList?.length == 0
  console.log 'file not found'
  return

im = require('imagemagick')

evenize = (fileName)=>
  im.identify fileName, (err, features) ->
    throw err  if err

    direction1 = ''
    direction2 = ''
    south = 0
    east = 0

    if features.height % 2 == 1
      direction1 = 'south'
      south = 1

    if features.width % 2 == 1
      direction2 = 'east'
      east = 1

    direction = "#{direction1}#{direction2}"
    #-background #e2ddd4 -gravity southeast -splice 1999x25 sample367e.png

    if south or east
      im.convert([fileName, '-background', 'rgba(0, 0, 0, 0)','-gravity', direction, '-splice',  "#{east}x#{south}", fileName], (err, stdout) ->
        throw err  if err
        console.log "complete:", fileName
      )

for fileName in fileList
  evenize(fileName)