DEV Community

loading...
Cover image for Checkboxify your images with JavaScript ✅

Checkboxify your images with JavaScript ✅

dailydevtips1 profile image Chris Bongers Originally published at daily-dev-tips.com ・3 min read

Lately, we have been on a journey with Canvas and have learned the following elements to it:

Today, we are doing something indirectly using canvas, and this has been something that's been on my mind for a long time!

We are creating checkbox art! ✅

I don't know if this was an official art-form, but now it is.

The result will look like this:

Checkbox art with JavaScript

HTML Structure

As for our HTML, we need our sample image, a canvas to use and out output div.

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1600097347472/FaJTB7UrN.jpeg" id="eeveelutions" />
<canvas id="canvas" width="100" height="100"></canvas>
<div id="output"></div>
Enter fullscreen mode Exit fullscreen mode

In this case the image is 200x200 The canvas is 100x100 and the output will become 400x400.

CSS Styling

Because we are using checkboxes to style, I am floating them to make them snap to each other.
And using <br /> to create a new row.
The br will actually act as a clear for the float.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 0;
}
canvas {
  opacity: 0;
}
input {
  width: 4px;
  height: 4px;
  margin: 0;
  padding: 0;
  float: left;
}
br {
  clear: both;
}
#output {
  width: 400px;
  line-height: 0px;
}
Enter fullscreen mode Exit fullscreen mode

Our canvas, we are hiding by setting the opacity to 0.

JavaScript checkboxify your images

First let's define all our variables.

const img = document.getElementById("eeveelutions");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const output = document.getElementById("output");
let loaded = 0;
Enter fullscreen mode Exit fullscreen mode

Now we need to listen to our image load before we act on it.

img.onload = function () {
  loaded++;
    // Do stuff
};
Enter fullscreen mode Exit fullscreen mode

We count when the image gets loaded because it will fire twice, the actual load, and once it gets drawn on canvas.

Next up, we can add the image to the canvas

ctx.drawImage(img, 0, 0, 100, 100);
Enter fullscreen mode Exit fullscreen mode

The parameters of this are: (source, x, y, width, height)

Ok, so we now have our canvas, and the image is drawn on it. We must then check if it's the second load and start doing some magic inside that load.

if (loaded > 1) {
    // The second draw on the canvas
}
Enter fullscreen mode Exit fullscreen mode

We can then get the imageData from the canvas. (x, y, width, height)

const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
Enter fullscreen mode Exit fullscreen mode

I'll now show you the rest of the function

let j = 0;
for (i = 0; i < imgData.data.length; i += 4) {
  let count = imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2];

  let _break = document.createElement("br");
  let checkbox = document.createElement("INPUT");
  checkbox.setAttribute("type", "checkbox");
  checkbox.checked = true;
  if (count > 383) checkbox.checked = false;

  output.appendChild(checkbox);
  j++;
  if (j === 100) {
    j = 0;
    output.appendChild(_break);
  }
}
Enter fullscreen mode Exit fullscreen mode

We are using the j parameter to count the rows, so every 100 lines are 1 row, so we need to add a <br /> element.

The main loop only loops over every four elements, since the imageData API gives us rgba values for each pixel, so four values to define 1 pixel.

Then we count the colours of our rgba pixel by adding the first three (r g b).

And check if this pixel is a black or a white pixel by checking if it's bigger then 383 (half of 255+255+255).

Then we create a checkbox, and if our pixel is black, we make it checked.

Last we add our checkbox to the output div, and if needed, add our row break.

There you go, have a play around on this Codepen.

Browser Support

The imageData API, as well as canvas, have very good support!

HTML Canvas imageData support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (5)

pic
Editor guide
Collapse
soorajsnblaze333 profile image
Sooraj

This looks so cool :)

Collapse
dailydevtips1 profile image
Chris Bongers Author

Cool right! I like the weird forms of art we can make 🔥

Collapse
soorajsnblaze333 profile image
Sooraj

Yes canvas is a really interesting topic :)

Collapse
devsaurabh profile image
Saurabh Sharma

This is awesome. Thanks :))

Collapse
dailydevtips1 profile image
Chris Bongers Author

Your welcome, cool effect right?! Planning to make this in some kind of fun tool