Image Processing in Node

JaxNode January 2017

Whats new?

  • We have our own mobile apps for Android and iOS
  • More companies in Jax using node
  • Looking for speakers for rest of the year

What do you want to See?

  • Client side tools? i.e. WebPack, Gulp
  • Client side frameworks? Angular, Redux
  • Server side frameworks? Express, Hapi
  • Desktop app frameworks? Electron, React-Native
  • Mobile frameworks? Cordova, React-Native
  • Cloud based APIs, serverless frameworks?
  • CI, GIT or other topics?

Image Processing Introduction

  • A Little Digital Image History
  • Image and Color Theory
  • Node tools for image processing
  • Use Node to create plugins for Photoshop
  • Build are own tool for image processing

Digital Imaging

  • Scitex
  • Response 300
  • $1 million system
  • $45 megabyte of RAM
  • $300 an hour retouching

Photoshop 1.0

  • Support Color different Models
  • Selection Magic Wand
  • Clone Tool
  • Channel support
  • File Formats
  • Level Control
  • Blur/Sharpen filters
  • Lens Flare
  • Licensed to Adobe 1990, Shipped 1991

Why would we need to use image processing in Node?

Use Cases

  • Save in a different file format 
  • Resize an image
  • Add a watermark
  • Apply effects and filters

Types of Images

  • Vector
  • Raster

Vector Images

  • Use defined points or nodes
  • Nodes make up shapes defined by math
  • Individual Nodes are joined by paths
  • Paths can be straight or curved
  • Sometimes use bézier math to define path 

Bézier Curve

Vector Image formats

  • SVG
  • AI
  • EPS
  • CDR
  • WMF
  • PDF (buyer beware)

Raster Image

  • Two dimensional array of pixels
  • Images can have over 16 million colors
  • Human eye can only see 10 million
  • Each pixel can store from 1 bit to 48 bits per pixel

X ----------->

Y-------->

Raster Image Formats

  • JPG (jpeg)
  • GIF
  • PNG
  • TIFF
  • PICT
  • BMP
  • Raw
  • PSD

Format compression

  • Most have varying levels of compression
  • Some formats have destructive compression
  • Some non-destructive compression
  • JPEGs have destructive compression
  • PNGs have non-destructive compression
  • TIFF files use LZW compression

Color Models

  • Bitmap
  • Grayscale (B/W)
  • RGB
  • RGBA
  • CMYK
  • HSV
  • LAB
  • Indexed

Channels

  • Each color is represented as a channel
  • RGB has three channels
  • Grayscale is a One channel
  • Alpha channels used for opacity

Image Processing Methods

  • Convert to Different format
  • Resize
  • Crop
  • Composite
  • Color correction
  • Blurs and Effects

Options in Node

  • GraphicsMagick/Image Magick
  • (Light Weight Image Processor) lwip
  • Jimp in pure JavaScript
  • Photoshop Generator

GraphicsMagick

  • Requires External Dependencies
  • brew install on a Mac
  • Fast and well known tool

LWIP

  • Doesn't require external dependencies
  • Does require native addons in C++
  • Uses Node-gyp to compile
  • Fast and supports most formats
  • Won't work in the browser

Atwoods Law

Any application that can be written in JavaScript, will eventually be written in JavaScript

Jimp

  • Written in JavaScript
  • No external dependencies
  • Not as fast as Native addon
  • Will run in the browser
  • Most portable

Jimp example

import { Jimp } from 'jimp';

Jimp.read("lenna.png").then(function (lenna) {
    lenna.resize(256, 256)            // resize
         .quality(60)                 // set JPEG quality
         .greyscale()                 // set greyscale
         .write("lena-small-bw.jpg"); // save
}).catch(function (err) {
    console.error(err);
});

Adobe Photoshop

  • Connects to Node through Generator
  • Scriptable with ExtendScript (ES5!!!)
  • Only runs on Mac and Windows
  • Don't run this on your server!
  • Over 25 years old
  • Originally written in Object Pascal, now in C++

Example project

  • Jimp-appicon
  • Creates app icon resources for mobile apps
  • Installable from NPM
  • macOS only :-(
  • sudo npm install -g jimp-appicon
  • sudo yarn global add jimp-appicon
  • appicon -s myiconfile.png
  • Written to use every core on CPU

Demo

Questions?

Resources

  • github.com/Jaxnode-UG/imageprocessing
  • github.com/EyalAr/lwip
  • github.com/oliver-moran/jimp
  • github.com/adobe-photoshop
  • slides.com/davidfekke/imageprocessinginnode
  • github.com/amix/photoshop

Contact Me

  • David Fekke at gmail dot com
  • Skype: DavidFekke
  • Twitter: davidfekke 
Made with Slides.com