Categories: JavaScript

How to pixelate images using Javascript

Posted by Raffael on Posted in HTML, JavaScript, Tutorials Tagged , , , , , ,

Close Pixelate TutorialToday 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 […]

Javascript’s escape() in C# – a C# equivalent to the escape()-function

Posted by Raffael on Posted in C#.Net, JavaScript, Tutorials Tagged , , , , , , , , ,

csharp_vs_javascriptThe .NET framework provides a large number of ways to encode HTML code and URLs. There exist, for example, Uri.EscapeDataString(), Uri.EscapeUriString(), System.Web.HttpUtility.UrlEncode(), System.Web.HttpUtility.UrlPathEncode(), System.Web.HttpUtility.HtmlEncode() or System.Web.HttpUtility.HtmlAttributeEncode().
However, if you are looking for equivalent functionality to Javascript’s escape(), so you will be disappointed by all of these aforementioned functions. None of these inherently with the .NET framework delivered functions is equivalent to the Javascript escape() function.  For better understanding, I made the following example:
The test text is in german, because the ‘ä’ is a nice character to show the problems. Translated to english it means: “Raffi’s annoying C# testcode”.

// Original source text
// Raffi’s ärgerlicher C# Teststring/Testcode.

// Javascript original (produced by escape())
// Raffi%27s%20%E4rgerlicher%20C%23%20Teststring/Testcode.

// Uri.EscapeDataString():
// Raffi’s%20%C3%A4rgerlicher%20C%23%20Teststring%2FTestcode.

// Uri.EscapeUriString():
// Raffi’s%20%C3%A4rgerlicher%20C#%20Teststring/Testcode.

// System.Web.HttpUtility.UrlEncode():
// Raffi%27s+%c3%a4rgerlicher+C%23+Teststring%2fTestcode.

// System.Web.HttpUtility.UrlPathEncode():
// Raffi’s%20%c3%a4rgerlicher%20C#%20Teststring/Testcode.

// System.Web.HttpUtility.HtmlEncode():
// Raffi's ärgerlicher C# Teststring/Testcode.

// System.Web.HttpUtility.HtmlAttributeEncode():
// Raffi's ärgerlicher C# Teststring/Testcode.

But I would not blog about it if I did not have a […]

globalCompositeOperation copy fix – how to paint transparent on JS canvas

Posted by Raffael on Posted in JavaScript Tagged , , , , , , , , , , ,

Below there is again a very special article. I think the people who are affected will understand what it is about. All others must be said that the next article will be for a wider audience again.
Some time ago I wrote an article about small progress bar script of mine, which is implemented entirely in JavaScript. Particular attention I had laid in part to the nice rounded corners. (See the following screenshot)
Javascript only Progressbar
Originally, I had realized the transparent corners using own paths, which I created and filled as shown below.

ctx.globalCompositeOperation = "copy";
ctx.fillStyle = "rgba(0,0,0,0.0)";
ctx.fill();

Unfortunately I had to recognize that the script was not working correct any longer. But the JavaScript console of different browsers (IE, FF, Chrome) curiously gave me no errors or warnings.
After some googling I found out that the globalCompositeOperation “copy” is not correctly implemented/supported anymore. […]

JavaScript based online Gameboy emulator

Posted by Raffael on Posted in JavaScript, Personal stuff, Web Tips Tagged , , , , , ,

Original GameboyIt’s not often that I play games. And if I do, then my favorites are classic games. And yes, I still grow up with a Gameboy. With a large Gameboy.  Since these are no longer available, I have already had one or two emulators in my hands.  But what I’ve found now on the web, I’ve never seen before.
A student named Grant has developed his own Game Boy emulator. The remarkable thing is that it is completely written JavaScript and therefore runs online.
I think that’s an extraordinary achievement. An online demo can be found here. Also Grant has uploaded the sources to github.
The roms, which are needed to play, you have to get by yourself. But a short look over at Google should help you. Because the procurement of roms is in a […]

Tutorial: How to create a simple HTML5 JavaScript based progress bar

Posted by Raffael on Posted in JavaScript, Tutorials Tagged , , , , , ,

JavaScript Progressbar
Since I needed a javascript based progress bar for a Web project and I could not find a component that meets my expectations, I decided to write my own progressbar.
The project was implemented in JavaScript with help of the HTML5 canvas element. The progress bar gets along without any image files, as it is usually the case with other JS / CSS progress bar solutions. By default it can handle 100 states (0-100%) and input errors will be caught and visualized.
Since I like to share my developments I present you the progressbar of course. I’m always open for criticism, praise and suggestions.
For a demo / example click here. The source can be found over here: pbar.js
Below I will show you quickly how to use the progressbar.
At first you have to embed the progress bar […]