Today there is again a bit of Javascript code. The exact topic is about how you can pixelate images via Javascript. This has both advantages and drawbacks, which I would like to briefly point out once below.
Advantages:
- Pixelation can be done dynamically (Manual effort in your graphics program falls away. Graphics must not be known beforehand.)
- The computational power required is outsourced to the client side. In contrast to a server-side solutions (eg using PHP & Imagick), the computational load is distributed to the users. This helps to keep the server load low, if you have a lot of visitors.
Disadvantages:
- The pixelation should be used rather as design or graphic effect, since the data is only sent not pixelated to the client. So if you really want to hide faces and picture information the pixelation still needs to be done before delivery to the client. (In plaintext this means if you want to go secure, than you have to pixelate on server side or before uploading the images.)
How does this work by using only Javascript?
To pixelate images in javascript we make use of a library called “Close Pixelate“. This takes images from an <img>-tag, reads its image data value, pixelates them and then draws the pixelated image on a <canvas>-element. Finally Close Pixelate replaces the original <img>-tag with the <canvas>-element.
Since search engines normally do not execute Javascript code, they still see and crawl the <img>-tag with the non pixelated image and maybe will also index it! As mentioned in the introduction, you should use this method to pixelate images only as a design element/tool, but not if to hide image information!
How do I use Close Pixelate?
Before we can use Close Pixelate, we must embed it first of all in our website. The current version of the library can be found here: Download (close-pixelate.js)
Then we need to include the library in the website.
<script type="text/javascript" src="close-pixelate.js"></script>
Now we need a picture that we want to pixelate.
<img id="squares" alt="" src="raffael_herrmann.jpg" />
Since the image must be completely loaded into the users browser before we can modify it with Close Pixelate, we must write the Close Pixelate relevant code inside the onload event. (If you work with jQuery, don’t confuse jQuery’s ready-event with standard Javascript’s onload-event. The ready-event is triggered before the onload-event and won’t wait for all image ressources to be loaded. So the ready-event is too early for the Close Pixelate code!)
window.onload = function() {
document.getElementById('squares').closePixelate([
{ resolution : 8 }
]);
};
In the onload-event, we are now getting a reference to the image using the getElementById method and then call the closePixelate method on it. In the above example we have used the minimum configuration specified with “resolution”. An example page might look like this:
<html>
<head>
<script src="close-pixelate.js"></script>
</head>
<body>
<h2>Original</h2>
<img id="original" src="raffael_herrmann.jpg">
<hr/>
<h2>Pixelate - squares</h2>
<img id="squares" src="raffael_herrmann.jpg">
<script type="text/javascript">
window.onload = function() {
document.getElementById('squares').closePixelate([
{ resolution : 8 }
]);
};
</script>
</body>
</html>
That’s everything you need to do, if you want to pixelate an image via Javascript. However, Close-Pixelate can do much more. I move on to alternative options later in this post.
Online demo and source code
You can watch and download the example from above by clicking the both links below this paragraph. If you are downloading it and want to test ist offline/local, then you should open it in Firefox, as you will usually face some same-origin policy-problems in other browsers. (However, online/on your webspace/server, it works in every case and browser.)
More options
As shown in the second example from the above online demo, the ClosePixelate-method accepts some other parameters then just the resolution. This way you can achieve some more effects than just the plain pixelization of images.
resolution – defines the distance between the rendered pixels. This value is needed in every case.
shape – defines the shape of the pixels. Default a square shape is set. But you can also use circle or diamond as shape.
size – defines the size of the rendered pixels. Default it’s set to the same value than resolution property
offset – defines the offset by which the calculated pixel mask is transformed/moved
alpha – defines the transparency. The value range goes from 0 (not visible) up to 1 (completely visible).
If you want to find a quick convenient mixture of all parameters and do not want to save your test file again and again and reload your browsers page to see your changes, then get a look on thepixelator.com. The page provides you with a graphical interface for the Close Pixelate library, so that you can try different settings without much effort.
Finally…
Close-Pixelate, in my opinion, is a really great piece of Javascript code, which I could use 2-3 times already in projects. The handling is easy and straightforward. However, one should always be aware that the data is pixelated at runtime and on the client side. (See introduction.)
What do you think of the library? Do you think it’s useful or is it not rather your case?
Great article! as a tip I found this Pixelate effect image tool very useful https://mate.tools/pixelate-effect-image