How to call some Pixastic functions

I was doing a bit of work with Canvas recently, manipulating images in the browser and writing the results out to files. I was looking for a package that could do various effects on the images, such as sharpen, blur etc. and came across the Pixastic package used in similar applications. However, unfortunately, the website for the package is currently down and I couldn’t find much documentation on it anywhere. So, I had to look at the source code to figure out how to call the various functions. Not the end of the world, but I just thought I’d stick some simple examples here, to maybe help get others started with the package and to direct them to the source code for more information!

I got the source code from JSdeilvr.net, which is minified, but there is unminified source on GitHub.

The 3 functions I was looking to use were sharpen, brighten/darken and blur. I’ll go through each individually. Firstly though, I’ll mention that the first parameter to each function is a Javascript Image object, which obviously has a src attribute with your image’s contents. The whole point of this was that I was building a tool with buttons which, when clicked, would perform each of the functions above on the current Image. When applying a filter, it’s best track the current level of e.g. brightness, increase/decrease this value, reset the image to how it originally looked and then apply the filter with the new value. This is better than say brightening it by 10%, then brightening the result by 10% again.

Seeing as I used brightness for the example above, I’ll start with that. Also, to darken an image, you simply reduce the brightness value, obviously.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// initial code setup
var img = new Image();
img.src = 'whatever';
img.original_src = img.src; // for doing the resets
// add the current value of each filter to the Image
$.extend(img, {brightness: 0, sharpen: 0, blur: 0});

// ...

// 'Brighten' button click handler
$('#brighten').click(function() {
img.brightness += 2; // brighten by 2 (for darken, reduce by an amount, will work with negative values)
// max brightness of 255
if (img.brightness > 255) img.brightness = 255;

// now we reset the image by creating a copy
img.src = img.original_src;
// now, apply the filter
img = Pixastic.process(img, "brightness", {
brightness : img.brightness
});
});

For sharpen, I found it best not to sharpen by the same amount each time, it just didn’t lead to nice results.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$('#sharpen').click(function() {
if (img.sharpen < 0.5){
img.sharpen += 0.1;
}
else if (img.sharpen > 0.75){
img.sharpen += 0.01;
}
else {
img.sharpen += 0.02;
}
if (img.sharpen > 0.88) {
img.sharpen = 0.88;
}

// now we reset the image by creating a copy
img.src = img.original_src;
// now, apply the filter
img = Pixastic.process(img, "sharpen", {
amount : img.sharpen
});
});

Lastly, blur was a bit more straightforward, increasing by 1 every time:

1
2
3
4
5
6
7
8
9
10

$('#blur').click(function() {
img.blur++;

// now we reset the image by creating a copy
img.src = img.original_src;
// now, apply the filter
img = Pixastic.process(imageObjs[selected_image].image, "blur", {
amount : img.blur
});
});

As I’m sure you’ve spotted, there’s a certain amount of repetition in the code above, starting with the line “// now we reset…”. What I did was to write a function called applyFilters, which you call once you’ve calculated your new value for brightness/sharpen/blur. This will then reset the image and apply all 3 filters. With the code above, if you were to say brighten, then blur, only the blur would be applied, as the image is reset each time. Doing it this way removes that problem.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

So, that should be enough to get you working with Pixastic. As for working with Canvas, that’s another blog post!

How to call some Pixastic functions

No Comments

Leave a reply