@

drinks

are on david 🍻

join us on slack

SSID: pixelbar

WW: 1337hacker

Pretty fly for a Wi-Fi:

Today

1. Intro

2. Setup

3. Basics

4. Lets build us a meme generator 🤓

5. Wrap up 🍻

pixelbar

pixelbar.nl

nodeschool

n odeschool.io

David

John

Timon

Tiemen

anti-harassment policy

code of conduct

setup

- terminal

- nodejs.org

- texteditor

- an image from the web

mkdir nodeschool4
cd nodeschool4
npm init
npm install jimp --save
touch index.js

// hit return a few times

// first example; lets resize the image

const Jimp = require('jimp');

Jimp.read('in.jpg').then(image => {

  image
    .resize(100, 100)
    .write('out.jpg');

});

// TIP: Also try passing Jimp.AUTO as one of the sizes

in.jpg

out.jpg

$ node index.js

in.jpg

out.jpg

With Jimp.AUTO

Squashed cat

Other operations

image.sepia()

image.blur(n)

image.invert()

image.rotate(n)

More in docs: https://www.npmjs.com/package/jimp

.sepia()

.invert()

.blur(10)

.rotate(180)

Colors

// second example; playing with colors

const Jimp = require('jimp');

Jimp.read('in.jpg').then(image => {

  image
    .color([
      {apply: 'hue', params: [-90]}
    ])
    .write('out.jpg');

});

https://www.npmjs.com/package/jimp#colour-manipulation

// second example; playing with colors

const Jimp = require('jimp');

Jimp.read('in.jpg').then(image => {

  image
    .color([
      {apply: 'hue', params: [-90]},
      // more modifiers can be applied here..
    ])
    .write('out.jpg');

});

Ok.

Lets build some memes

// third example; playing with text

const Jimp = require('jimp');

Jimp.read('in.jpg').then(image => {

  Jimp.loadFont(Jimp.FONT_SANS_64_WHITE).then(font => {

    image
      .print(font, 10, 10, "They said there would be food", image.bitmap.width)
      .write('out.jpg');

  });

});

You can do better!

Have text located at top and bottom

Center the text in its container

Read text and image from arguments

Wrap this in an Express server so we can put memegenerator.net out of business

Figure out wether text should be black or white based on image colors

👉 http://expressjs.com