Retrieving and Editing Images from Flickr with flickr-sdk + JIMP using Node.js

On By Dan CoxIn code, howto

Prerequisites:

As part of a recent project in creating a Twitter bot that would find random images on Flickr and then glitch them, I needed a set of libraries that would be able to retrieve some random image given a URL and then edit them. I also needed both libraries to be entirely in JavaScript and not require, as many image-editing libraries do, some external programs to do the work.

For this project, after trying several image-editing libraries, I settled on JIMP for both the editing and retrieval processes. (If you want to break them up, I recommend Request as a good library that supplies wrappers around any basic network functionality you’d need.) For access to Flickr, I used flickr-sdk.

Note: While Flickr points you to flickrapi for a Node.js module for Flickr API access, I DO NOT recommend it for projects on remote servers or services like Heroku. It will create multiple folders and attempt to cache images, something far from ideal for quickly retrieving random images.

To get started, install the following modules in your working directory or globally, if you want access to them across projects.

npm install jimp

npm install flickr-sdk

npm install -g flickr-oauth-dance

After installing flickr-sdk, you will need an keys from Flickr to continue. For that, use “flickr-oauth-dance”.

Note: flickr-oauth-dance will read your Flickr credentials from your Chrome cookies. If you have not already, log into Flick using Chrome before the next step.

From the command-line run: flickr-oauth-dance

step4

flickr-oauth-dance will ask for various information about your app including a name and a description. Before producing the access key needed, it will also ask you to confirm the permissions of the app. For testing purposes, I recommend “read” to start and then, later, changing it if you also want to upload or change images on Flickr.

step5

Examine “local.json” for your API and access keys.


var Flickr = require('flickr-sdk');
var Jimp = require("jimp");
var flickr = new Flickr({
"apiKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"apiSecret": "xxxxxxxxxxxxxxxx",
"accessToken": "xxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxx",
"accessTokenSecret": "xxxxxxxxxxxxxxxx"
});
// Refer to the flickr-sdk github page (https://github.com/flickr/flickr-sdk#responses)
// In this example, the API will search for images of "puppies"
flickr
.request()
.media()
.search("puppies")
.get()
.then(function (response) {
// Change the index. 0, in this example, will be the first photo found in the set
var photo = response.body.photos.photo[0];
// Based on Flickr URLs (https://www.flickr.com/services/api/misc.urls.html)
var url = "https://farm" + photo.farm +
".staticflickr.com/" + photo.server +
"/" + photo.id + "_" + photo.secret + "_m.jpg";
Jimp.read(url).then(function (image) {
// Do something with the image
}).catch(function (err) {
// Handle any errors
});
});

view raw

index.js

hosted with ❤ by GitHub

Copy and paste the above code, putting in the API and Access Tokens retrieved from flickr-oauth-dance earlier.

Refer to the JIMP documentation for functions available.