Tutorial: Pixel Art Enlargement in jQuery

This is the jQuery version to the JavaScript version. Mostly, the process is the same between the two, the syntax has changed. However this version will preform the action on any container element with class of “pixelArt”.

“Pixel Art Enlarge” enlarges pixel art to any desired size, and draws it on a canvas element. This is much more effective than simply up-scaling an image. Modern browsers typically try to apply a bilinear filter to blur the edges and fill in missing pixel data. Normally this is acceptable. However, Pixel Art is best showcased without any filtering, so I have devised this setup. Also, the canvas 2d context “mozImageSmoothingEnabled = false;” is unreliable. Otherwise that would have been an excellent shortcut.

Secondly, file sizes can be greatly reduced. For example, in the demo below the source image is a 3KB .png file vs. an enlarged version at 35KB .jpg file. That is a factor of 10. Multiply that by thousands of images, and that is quite a lot of bandwidth.

View jsFiddle Demo
Let’s look at a whole page and dissect it:

Rows 1-7 for the most part are standard HTML page setup. Its assumed you know how to set up an HTML document. However there are two lines we’ll look closer at.

Row 3 includes the jQuery library from Google’s CDN repository. This library is what allows us to use jQuery syntax in our JavaScript code below the document’s closing <body> tag.

Row 6 requires a closer look.
First we assign the class “pixelArt” to the div element. This will be used in the jQuery code to identify what elements to run our functions on. **Note, with this code you will be able to have many divs that you wish to enlarge on the same page!
Secondly, we have two data attributes. The hyphen separates the data attribute from the data attribute identifier. The “src” data attribute stores the path to our intended pixel art image to enlarge.
The “size” data attribute stores the factor that we want to increase each pixel of the pixel art. In our example for each pixel in the source image we will now have a square 10 pixels wide and 10 pixels high.

Row 8 identifies that we will now be including JavaScript code in our document.

Row 9 is jQuery syntax that identifies when the document is loaded and ready to run code, then it runs our custom function.

Row 10 says, “For each element with the class ‘pixelArt’ run the following code.”

Row 11 is a conditional statement that tests whether the user’s browser recognizes <canvas> elements. Older browser do not know how to handle <canvas> elements. If not we provide a statement stating so. See Row 32.

Row 12 stores a reference to the element that called this function. Since we will be nesting function calls, we need an easy way to refer back to the original element.

Rows 13-14 dynamically creates two <canvas> elements. The first one is the one we will be displaying on the user’s monitor. The second one will never be displayed. It will be temporary just to hold the source image. We need to do this to be able to run some canvas methods later to extract pixel data.
You’ll notice we use “[0]”. This is because when the <canvas> element is created, an array is returned containing a reference to the canvas element as well as many canvas properties and methods. The reference to the canvas element is the first item of the array. Hence we use “[0]” to refer to that reference.

Rows 15-16 creates access to a whole library of methods that can be preformed on a canvas element. We run this declaration for both of our canvases.

Row 17 stores the user defined “size” from our original <canvas> element. This “size” is the factor by which we will increase an individual pixel to the finished image.

Row 18 does three separate things. Firstly jQuery creates an image element. Secondly it sets the source for the image element to the “src” path the user imputed in the original <div> element that called the function. Thirdly, it says, “Once the image is loaded, run the following function.”

Rows 19-20 sets the height and width of the canvas to be displayed on the user’s screen, to the calculated size of the final image. Which is the size in pixels of the original image, by the user defined ‘size’ set in the calling <div> element.

Row 21 places our dynamically created <canvas> element on the user’s screen inside the calling <div> element.

Row 22 draws our source image onto the tempCanvas. Once again, we do this, so we can run the 2D context methods on the source image’s data.

Rows 23-24 create two for loops. These will read one pixel at a time from our source image, moving left-to-right top-to-bottom. Once we are done running code for one pixel, we will move on to the next pixel, until there are no more.

Row 25 stores the pixel data from the next pixel in the row or column.

Row 26 gets the “red”, “green”, “blue” and “alpha” values of the pixel we just looked at, and sets the main canvas’s 2D context “fillstyle” to those values.

Row 27 uses the canvas’ 2D context methods to fill a square with our stored ‘rgba’ values from step 26. The square’s starting position is the source pixel’s location multiplied by the user defined ‘size’ factor. The square size is set by the user defined ‘size’ factor as well.

Rows 28-30 closes our two ‘for’ loops, and our ‘on image load’ function.

Rows 31-33 completes the ‘if else’ statements that test whether the user’s browser recognizes the <canvas> element.

Row 34 closes the ‘for each’ element with class ‘pixelArt’ loop’s function.

Row 35 closes the ‘when the document is ready do this =>’ function.

Row 36 closes our ‘JavaScript’ code element.

Row 37 closes the entire HMLT document.

That’s it! I hope this breakdown gives you an idea of how the code works, as well as how to alter it to fit your specific needs.
I would love to hear any improvements you can come up with, as well as link to any pages you’ve created with the above code.
Cheers!

Posted in HTML, jQuery Tagged with: , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*