npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

glitch-canvas

v1.1.12

Published

JavaScript library for applying a glitch effect to a canvas element

Downloads

119

Readme

Build Status Greenkeeper badge

glitch-canvas

downloads

$ npm install glitch-canvas

what is it?

glitch-canvas is a javascript library for applying a glitch effect to a canvas element. it can be used to transform images to look like this:

glitched image

for a live example, you can check out my jpg-glitch editor online.

how to use it

this library can be used in web browsers as well as in node. it supports loading as an AMD module, as a CommonJS module or a global variable..

a simple example:

	glitch( { seed: 25, quality: 30 } )
		.fromImage( image )
		.toDataURL()
		.then( function( dataURL ) {
			var glitchedImg = new Image();
			glitchedImg.src = dataURL;
		} );

as you can see, there are three calls happening:

  1. glitch() is called with the glitch parameters
  2. then fromImage() is called with the input image as parameter
  3. and finally toDataURL() is called to output a dataURL.

when using the library, always follow these three steps:

  1. glitch
  2. input
  3. output

all input and output methods are asynchronous and use promises for flow control.

for an explanation of all available methods and parameters, check out the reference section below.

you can find more examples for both node and the browser in the examples folder of this repository.

reference

glitch()

glitch() can take the following parameters that control how the glitched image is going to look:


// the parameters listed are the default params

var glitchParams = {
	seed:       25, // integer between 0 and 99
	quality:    30, // integer between 0 and 99
	amount:     35, // integer between 0 and 99
	iterations: 20  // integer
};

please note: depending on the size, quality and contents of the source image and the number of iterations, the visual effect of the seed and amount parameters can be marginal or not even noticeable.

it returns an object containing all input methods.

fromImage()

fromImage() expects an Image object as its only parameter. it returns an object containing all input methods.

example:

var image = new Image();

image.onload = function () {
	glitch()
		.fromImage( image )
		.toDataURL()
		.then( function( dataURL ) {
			var glitchedImg = new Image();
			glitchedImg.src = dataURL;
			document.body.appendChild( glitchedImg );
		} );
};

image.src = 'lincoln.jpg'

please note: this method is not available in node. important: when using the library in a browser, make sure the image was loaded before glitching it.

fromImageData()

fromImageData() expects an ImageData object as its only parameter. it returns an object containing all input methods.

example:

var canvas = document.createElement( 'canvas' );
var ctx = canvas.getContext( '2d' );

ctx.fillStyle = 'red';
ctx.fillRect( 30, 30, 90, 45 );
ctx.fillStyle = 'green';
ctx.fillRect( 10, 20, 50, 60 );

var imageData = ctx.getImageData( 0, 0, canvas.width, canvas.height );

glitch()
	.fromImageData( imageData )
	.toDataURL()
	.then( function( dataURL ) {
		var glitchedImg = new Image();
		glitchedImg.src = dataURL;
		document.body.appendChild( glitchedImg );
	} );

fromBuffer()

fromBuffer() expects a Buffer object as its only parameter. it returns an object containing all input methods.

it uses image#src=buffer from node-canvas internally.

example:

var fs = require('fs');

fs.readFile( './lincoln.jpg', function ( err, buffer ) {
	if ( err ) { throw err; }
		
	glitch()
		.fromBuffer( buffer )
		.toBuffer()
		.then( function ( glitchedBuffer ) {
			fs.writeFile( __dirname + '/glitched-lincoln.png', glitchedBuffer, function ( err ) {
				if ( err ) { throw err; }
				console.log( 'file glitched.' );
			} );
		} );
} );

please note: this method is only available in node.

fromStream()

fromStream() expects a ReadableStream object as its only parameter. it returns an object containing all input methods.

it uses image#src=buffer from node-canvas internally.

example:

var fs = require('fs');

var inputStream = fs.createReadStream( './lincoln.jpg' );
var outputStream = fs.createWriteStream( './glitched-lincoln.png' );

glitch()
	.fromStream( inputStream )
	.toPNGStream()
	.then( function ( pngStream ) {
		pngStream.on( 'data', function ( chunk ) { outputStream.write( chunk ); } );
		pngStream.on( 'end', function () { console.log( 'png file saved.' ); } );
	} );

please note: this method is only available in node. currently, theres no input sanitation for this method, so you'll want to make sure that the input stream contains an image.

toDataURL()

toDataURL() does not take any parameters. it returns a String containing the base64-encoded image url.

example:

var image = new Image();

image.onload = function () {
	glitch()
		.fromImage( image )
		.toDataURL()
		.then( function( dataURL ) {
			var glitchedImg = new Image();
			glitchedImg.src = dataURL;
			document.body.appendChild( glitchedImg );
		} );
};

image.src = 'lincoln.jpg'

toImageData()

toImageData() does not take any parameters. it returns an ImageData object.

example:

var image = new Image();

image.onload = function () {
	glitch()
		.fromImage( image )
		.toImageData()
		.then( function ( imageData ) {
			var canvas = document.createElement( 'canvas' );
			var ctx = canvas.getContext( '2d' );
			ctx.putImageData( imageData, 0, 0 );

			document.body.appendChild( canvas );
		} );
};

image.src = 'lincoln.jpg'

toImage()

toImage() does not take any parameters. it returns an Image object.

example:

var image = new Image();

image.onload = function () {
	glitch()
		.fromImage( image )
		.toImage()
		.then( function ( glitchedImage ) {
			document.body.appendChild( glitchedImage );
		} );
};

image.src = 'lincoln.jpg'

please note: this method is only available in the browser.

toBuffer()

toBuffer() doesn't take any parameters. it uses canvas#tobuffer from node-canvas internally.

it returns a Buffer object.

example:

var fs = require('fs');

fs.readFile( './lincoln.jpg', function ( err, buffer ) {
	if ( err ) { throw err; }
		
	glitch()
		.fromBuffer( buffer )
		.toBuffer()
		.then( function ( imageBuffer ) {
			fs.writeFile( './glitched-lincoln.png', imageBuffer, function ( err ) {
				if ( err ) { throw err; }
				console.log( 'created a pdf file.' );
			} );
		} );
} );

please note: this method is only available in node.

toJPGStream()

toJPGStream() can take the following parameters:

var jpgStreamParams = {
	bufsize: 4096,          // output buffer size in bytes
	quality: 75,            // jpg quality (0-100) default: 75
	progressive: false      // true for progressive compression
};

it uses canvas#jpegstream() from node-canvas internally.

it returns a JPEGStream object.

example:

var fs = require('fs');
fs.readFile( __dirname + '/lincoln.jpg', function ( err, buffer ) {
		if ( err ) {
			throw err;
		}

		var fileStream = fs.createWriteStream( __dirname + '/glitched-lincoln.jpg' );
		
		glitch()
			.fromBuffer( buffer )
			.toJPGStream()
			.then( function ( jpgStream ) {
				jpgStream.on( 'data', function ( chunk ) { fileStream.write( chunk ); } );
				jpgStream.on( 'end', function () { console.log( 'file glitched.' ); } );
			} );
	} );

please note: this method is only available in node.

toJPEGStream()

see toJPGStream().

toPNGStream()

toPNGStream() doesn't take any parameters. it uses canvas#pngstream() from node-canvas internally.

it returns a PNGStream object.

example:

var fs = require('fs');
fs.readFile( __dirname + '/lincoln.jpg', function ( err, buffer ) {
		if ( err ) { throw err;	}

		var fileStream = fs.createWriteStream( __dirname + '/glitched-lincoln.png' );
		
		glitch()
			.fromBuffer( buffer )
			.toPNGStream()
			.then( function ( pngStream ) {
				pngStream.on( 'data', function ( chunk ) { fileStream.write( chunk ); } );
				pngStream.on( 'end', function () { console.log( 'file glitched.' ); } );
			}, function( err ) {
				console.log( 'There was an error', err );
			} );
	} );

please note: this method is only available in node.

development

npm run build will build the node-ready and browser-ready versions, which are saved to the dist-node and dist directories.

npm run test will run the tests in both the browser and node.

you can find the source code for the library in the src folder. it is using es6-style syntax.

license

mit

third party code

most of the folder structure and the npm script setup were taken from nonalnawson's hello javascript repo (Apache-2.0 license).

dependencies:

glitch-canvas in the wild

implementations in other languages

if you want to add your site or project to one of these lists, you can create a pull request or send me an email.

missing somehing?

found a bug? missing a feature? instructions unclear? are you using this library in an interesting project? maybe have a look at the issues, open a pull request and let me know. thanks!

most importantly

thank you for taking a look at this repo. have a great day :)