Using Twilio With Image Filters

Photo filters are a big thing today. Everyone seems to love Instagram. So this post is going to show you how to get filters working via MMS with Twilio and a Node.js backend. Disclaimer - This definitely works with jpegs, but I’m not sure about pngs, as everything I send to twilio ends up as a jpeg.

This assumes you already have a Twilio account, which you can get at Twilio. The next thing you’ll need after that is a couple of node modules installed via npm.

npm install hapi twilio node-uuid jpeg-js png-js file-type image-size inert

Hapi is the framework we’re using to handle our requests. node-uuid is just to create filenames that we are sure are unique. jpeg-js lets us encode and decode jpegs files and png-js does the same for png. file-type and image-size just allow us to apply filters to our images. inert is the file handler for Hapi.

Make sure your Twilio credentials are stored in environment variables.

const twilio = require('twilio');
const client = new twilio.RestClient();

Next we create a few helper methods.

This method just downloads the file for us and stores it on the file system.

let download = function(uri, filename, callback){
  request.head(uri, function(err, res, body){
    request(uri).pipe(fs.createWriteStream(filename)).on('close', callback);

This method decodes our image into an array of pixels. It will handle jpeg or png.

  let fileData = fs.readFileSync(fileName);
  // Get file type
  let metaData = fileType(fileData);
  let imageData;

  if (metaData.ext == 'jpg') {
    imageData = jpeg.decode(fileData);
  } else if (metaData.ext == 'png') {
    png.decode(fileName, function(pixels) {
      var size = sizeOf(fileName);
      // Convert to jpeg.  Writing back out to png was a pain.
      imageData = {
        data: pixels,
        width: size.width,
        height: size.height

Once we have an array of pixels, we just pass those pixels to our filter; in this case grayScale. = filter.grayScale(;

This is the Hapi route to handle the incoming message:

server.route({ method: 'POST', path: '/receiveMessage', handler: function(request, reply)

This is the function that runs upon receiving a message:

     // Download media
    download(message.MediaUrl0, fileName, function() {

      // Apply the filter to the media
      applyFilter(filterName, fileName, function(filteredFileName) {
        // Create the response and return the filtered media
        const twilioMessage = {
          body: "Filter applied!",
          to: message.From,
          from: message.To,
          mediaUrl: ''+filteredFileName

This of course isn’t doing any sort of error handling which would need to be added. This is the function to actually send the message.

function createMessage(twilioMessage) {
  client.sendMessage(twilioMessage, function(err, twilio) {

This is all we need to do to get the processing setup for the messages. Now we want to add some filters. I got a lot of this data from so take a look if you want to understand how these filters work.

I moved my filters to a different file just to make things a little bit cleaner.

This is the grayscale filter.

    // Go pixel by pixel and change to grayscale
    for (let i = 0; i <; i += 4) {
      let r =[i];
      let g =[i+1];
      let b =[i+2];

      let v = 0.2126 * r + 0.7152 * g + 0.0722 * b;[i] =[i+1] =[i+2] = v;

This is the threshold filter.

  // Go pixel to pixel and change to pure black and white
    for (let i = 0; i <; i += 4) {
      let r =[i];
      let g =[i+1];
      let b =[i+2];

      let v = (0.2126 * r + 0.7152 * g + 0.0722 * b >= threshold) ? 255 : 0;[i] =[i+1] =[i+2] = v;


The last thing we need is a route to serve up our altered images to Twilio to send back.

  method: 'GET',
  path: '/images/{file}.jpg',
  handler: function(request, reply) {

That’s it! Feel free to try it out by sending an MMS message to 702-666-0736.

Dig in and take a deeper look at