Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including rasterizeelement with all npm packages installed. Try it out:

var rasterizeelement = require("rasterizeelement")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

rasterizeelement v0.1.4

rasterize and crop the contents of specified DOM selector

rasterizeElement.js

Expands the functionality of rasterizeHTML.js to rasterize the contents of specified element. It supports everything that is supported by rasterizeHTML.js.

Install:

$ npm install rasterizeelement.js

Then use it via require('rasterizeelement') or use browserify builds from dist/rasterizeElement.js or dist/rasterizeElement.min.js in <script/> tag.

Example:

rasterizeElement.rasterize('#my-content', options, function(imgBase64){
  var img = document.createElement('img');
  img.src = imgBase64;
  document.appendChild(img);
});

Options:

OptiontypeDefaultDescription
encodingstring'png'Lets you choose the encoding of image such as 'png', 'jpg' or 'jpeg'.
qualitynumber1.0Should be between 0 to 1. 0 being lowest quality and 1 being the highest possible quality.
shouldClonebooleanfalseClones the document before rasterizing. Use this when you want to capture dynamic content that changes often.
canvasFillStylestring'#FFFFFF'Default background color of rasterized image.
var options = {
  encoding: 'png',
  quality: 1.0.
  shouldClone: false,
  canvasFillStyle: '#FFFFFF'
}

How it works?

The drill here is pretty simple. An entire document is rasterized on temporary canvas using rasterizeHTML. Temporary canvas is then resized using specified element's height, width, left offset and top offset and converted into base64 encoding.

Development:

  1. clone this repository
  2. cd into rasterizeElement.js
  3. run npm install
  4. run grunt build to manually build files in dist OR run grunt watch to auto build files as files in src changes

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free