Javascript effects for images

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

jaames / spriteFX Public archive

super fast image effects for javascript

jaames/spriteFX

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

• Fast — spriteFX uses composite operations, which are hardware accelerated — making it super speedy!
• Lightweight — the minified version of spriteFX weighs in at under 4kb (or ~1kb when gzipped).
• Simple — spriteFX’s image operations preserve the image’s transparency channel for you.
• Support for various module loaders.

First, download spriteFX.min.js, then include it into the of your document with a tag:

head> script src pl-s»>path/to/spriteFX.min.js«>script> head>

Next, the source image needs to be loaded as an Image object before loading it with spriteFX:

// create a new image object var img = new Image(); // set up a callback function that gets called once the image has loaded img.onload = function ()  // once the image has loaded, "open" it into a spriteFX instance var fx = new spriteFX(img); >; // load an image file from a URL img.src = "path/to/image.png";

Note: with spriteFX the new keyword is entirely optional, it’s up to you to decide which way suits your needs more

After the image has been opened with spriteFX we can apply various image operations to it:

var img = new Image(); img.onload = function ()  var fx = new spriteFX(img); // lighten the image by 50% fx.lighten(50); // then invert the image fx.invert(); // then add a red tint fx.multiply("rgb(255, 0, 0)"); >; img.src = "path/to/image.png";

See the Image Operations section for a full list of available image operations.

spriteFX supports method chaining, in a similar manner to libraries like jQuery or Underscore, if that’s your sort of thing. The code below procudes the same result as the code above, but uses chaining instead:

var img = new Image(); img.onload = function ()  var fx = new spriteFX(img); .lighten(50) .invert() .multiply("rgb(255, 0, 0)"); >; img.src = "path/to/image.png";

After the effects have been applied the result can be accessed from the image property. Note that this actually returns a canvas object rather than an image object for better speed and memory performance.

The CanvasRenderingContext2D.drawImage() method works with both canvas and image elements, so you can still draw the result onto your main canvas as you would with an image:

var img = new Image(); img.onload = function ()  var fx = new spriteFX(img); fx.lighten(50); fx.invert(); fx.multiply("rgb(255, 0, 0)"); // get the final result image var result = fx.image; // draw the result image to a canvas var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.drawImage(result, 0, 0); >; img.src = "path/to/image.png";

Reposition the current image content.

var fx = new spriteFX(img); // move the content 10 pixels on the x axis and -6 pixels on the y axis fx.translate(10, -6)

Rescale the current image content.

var fx = new spriteFX(img); // rescale the image to be 16 x 16 pixels fx.scale( width: 16, height: 16 >); // or you can specify either width or height only, and the aspect ratio will be maintained! fx.scale( width: 12 >);

Crop the image, while maintaining the scale. Arguments are in the order of x1, y1, x1, y2 .

var fx = new spriteFX(img); // crop 12 pixels from the left and bottom sides of the image fx.crop(0, 0, -12, -12); // add 12 pixels to the left and bottom sides of the image fx.crop(0, 0, 12, 12); // crop 12 pixels from all sides of the image fx.crop(12, 12, -12, -12); // add 12 pixels to all sides of the image fx.crop(-12, -12, 12, 12);

Lighten the image by a percentage value (where 100% equals pure white).

var fx = new spriteFX(img); // make the image 50% lighter fx.lighten(50);

Darken the image by a percentage value (where 100% equals pure black).

var fx = new spriteFX(img); // make the image 50% darker fx.darken(50);

var fx = new spriteFX(img); fx.invert();

Multiply each pixel of the image by a color value to produce a darker, color-tinted image.

var fx = new spriteFX(img); fx.multiply("rgb(255, 0, 0)");

Similar to multiply, but pixels are inverted before and after being multiplied, producing a lighter color-tinted image.

var fx = new spriteFX(img); fx.screen("rgb(255, 0, 0)");

var fx = new spriteFX(img); // add a green drop-shadow to the image extends 6 pixels along the y axis and 1 pixel along the x axis fx.dropShadow("rgb(0, 255, 0)", 6, 1);

Change the color of all the non-transparent pixels in the image.

var fx = new spriteFX(img); // make the non-transparent pixels blue fx.fillBG("rgb(0, 0, 255)");

Change the color of all the transparent pixels in the image.

var fx = new spriteFX(img); // fill the transparent pixels with black fx.fillBG("rgb(0, 0, 0)");

Creates an alpha map — a grayscale image where lighter values represent less transparency and darker values represent more transparency.

var fx = new spriteFX(img); fx.alphamap();

Creates an Image object from the spriteFX result. Since this can take some time, a callback function must be passed into the first parameter, this function will be called once the image has loaded.

There is an optional second parameter for the image MIME type, this defaults to «image/png» , however you could also use «image/jpeg» or «image/webp» where supported.

var fx = new spriteFX(img); fx.getImageObject(function (image)  // do something with the 'image' object >); // get the image as a JPEG fx.getImageObject(function (image)  // do something with the 'image' object - which is in JPEG format >, "image/jpeg");

If you need more functionality, you can extend spriteFX at runtime by using spriteFX.extend to add custom functions:

spriteFX.extend( function_name: function ()  // do stuff here // all spriteFX extensions MUST return this.done() when finished in order to be chainable return this.done(); > >);

About

super fast image effects for javascript

Источник

How to add image filters (photo effects) to images in the browser with JavaScript using Lena.js

The image filtering allows you to apply various effects on photos. Although JavaScript isn’t suitable for Image manipulation at least for huge scale, it can be used with not so heavy images in the browser and in little projects.

In this article we’ll show you how to add some image filters to images in the browser using the Lena.js library.

1. Download Lena.js

Lena.js is a tiny library for image processing. It allows you to apply some basic image filters to an image in the document. You can include a local copy of Lena.js from your project or use the CDN or from a local copy:

You can download the copy from the repository at Github here or by using some package manager like bower:

2. Using Lena.js

LenaJS is pretty easy to use, you can use 2 methods namely filterImage and redrawCanvas . Those methods expects an image and a canvas that will be used to apply some filter:

Available filters

Lena.js offers a variety of filters that can be applied to your image. The following list shows the ID of every filter:

• red : Red
• gaussian : Gaussian
• grayscale : Grayscale
• highpass : highpass
• invert : invert
• laplacian : laplacian
• prewittHorizontal : Prewitt Horizontal
• prewittVertical : Prewitt Vertical
• roberts : roberts
• saturation : saturation
• sepia : sepia
• sharpen : sharpen
• sobelHorizontal : sobel Horizontal
• sobelVertical : sobel Vertical
• thresholding : thresholding

The filters are stored in the same global variable LenaJS and can be accessed through its id using the key or dot notation e.g LenaJS[«prewittHorizontal»] or LenaJS.prewittHorizontal . Those properties are functions, however they are not used directly as a function by you but for LenaJS as a «constant».

How does it works?

The magic happens with the LenaJS.filterImage method. This method expects as first argument the canvas where the image with filter should be rendered, as second argument the filter (as a constant) that will be applied and as last argument the IMG element that stores the image. The image can be either a file loaded through src or as data URI base64:

   -->  

You can lastly export the image with the applied filter by simply getting its base64 representation with the filteredImageCanvas.toDataURL(«image/png») method.

Applying multiple filters

As mentioned, the filterImage method applys a single filter to an image, however if you execute it again, the start filter will be removed. So if you want to apply a filter after another, you will need to use the redrawCanvas method instead. This method expects as first argument the canvas where an image with a filter has been already rendered and as second argument the new filter that will be appended to the image:

   -->  

Live example

You can play with the following fiddle:

Источник