An open source thumbnailer framework
- Render the webpage as a PNG or JPG
- Control the quality level of your saved thumbnail (for JPGs)
- Resize the thumbnail
- Crop the thumbnail
- Copy / Delete / Rename thumbnails
The open-thumbnailer library makes all of this very easy.
npm install open-thumbnailer
To use a lot of the functionality in the library you will need to install graphicsmagick as well.
##Examples Thumbnails Here are some example thumbnails generated by this library:
To see some more thumbnails, look in the examples/thumbs directory. You can run the examples/top.js example and generate these thumbs for yourself.
###Supported File Formats You can save thumbnails as PNG of JPG files. For JPG files you can also specify a quality value in the fromUrl options that affects the JPG quality.
To create a thumbnail it's really just a few lines of code. For example to create a thumbnail for www.imdb.com you would do:
var OT = require'open-thumbnailer'thumbnailer = ;thumbnailerfromUrl''__dirname + '/imdb.com.jpg'if errorconsoledirerror;return;consoledirthumbnailgetInfo;;
At any point you can cancel an in progress thumbnail
There are various options you can specify to the thumbnailer when creating a thumb:
var OT = require'open-thumbnailer'thumbnailer = ;thumbnailerfromUrl''// To save as a PNG, simply change the file extension to PNG__dirname + '/imdb.com.jpg'// A number between 0 and 100 that specifies the quality of the jpg thumb.// Only applies if you are creating jpgs, not pngsquality: 75// If you don't specify an extension on the output path, then you must specify// the format here, if you don't want the default of jpg. Can be jpg, jpeg or png.// This value will be ignored if the output path has an extension already set on// it of png | jpg | jpegformat: 'jpg'// Can be true, which will use a simple internal console.log method// to log status, or you can provide your own log object e.g.log:console.logmessage;console.errorJSONstringifyerror// The amount of time to wait before cancelling the thumbnail. If a page// is taking a long time to load you may want to canceltimeout: 60// The amount of time (in seconds) to wait after the page loads before actually// trying to render the page. There may be cases where the page loads content// asyncronously and if you render straight away on load the page may not have// all the content.delay: 10// The size of the window when the page is loaded. This is not a crop size it// is the size of the browser window to use when loading the content. Content loaded// outside of these values will still be rendered in the final thumb. If you want// to crop then use the crop value as specified belowviewport: width: 1024 height: 768// The part of the page to render. The interesting part here is cropToPage, if this// is false then if the rendered webpage is smaller than the crop region the thumbnail// will still be as big as the crop region with pixels filled in black, however if you// set cropToPage:true, then if the webpage is smaller than the crop size the thumbnail// will be the same size as the page.crop: top:0 left:0 width: 1024 height: 400 cropToPage: trueif errorconsoledirerror;return;consoledirthumbnailgetInfo;;
##Thumbnail Examples Once you have generated a thumbnail, you will have a Thumbnail instance, there are several methods available to you:
###getInfo -> returns basic information about the thumbnail
var info = thumbgetInfo;console.loginfowidth + 'x' + infoheight + ' at ' + infopath + ' ' + infosize + ' bytes';
###destroy -> deletes the thumbnail from the disk
###copy -> creates a copy of the thumbnail on disk
###move -> moves the thumbnail on disk
###resize -> resizes and potentially crops the thumbnail
thumbresize// scales the thumbnail to 400 pixels wide, the aspect ratio of the clip// will be maintainedscaleToWidth: 400// scales the thumbnail to 600 pixels tall. Only specify one of scaleToWidth// and scaleToHeight, if both are specified the behaviour is unspecifiedscaleToHeight: 600// Optional - if not specified the thumb will be resized and the original// thumb variable points to the resized thumb. If you specify a targetPath// then a copy of the thumb is made and resized and the copied thumb is// returned in the callbacktargetPath: 'some-new-file.jpg'// crops the thumbnail AFTER it has been resized, so for example if you set// scaleToWidth to 400 and wanted a square thumbnail, you could then crop the// height to 400 pixels here to make the output squarecrop: top:0 left: 0 width: 400 height: 400// NOTE: resizedThumb will be null if you did not specify a targetpath// in the options;
- Install GraphicsMagick http://www.graphicsmagick.org/ (sudo port install graphicsmagick)
git clone https://github.com/markdaws/open-thumbnailer.gitcd open-thumbnailernpm installnpm testnode examples/top.js