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 

Image Processing in Node

By David Fekke

Made with Slides.com

Image Processing in Node

These are the slides for my January 2017 presentation on Image processing in Node.js and PhotoShop

  • 2,202

More from David Fekke