Tag Archives: javascript

Rendering image with div tags using Javascript

As I was trying to figure out how to protect image files from being copied; I thought: Why not render them as a bitmap using <div> tags? After a bit of searching I couldn’t find any project that does this, although there are plenty of examples that use html to draw images on the page. A good one that I like is Google Pacman. The closest “implementation” I found was to use the html5 canvas tag. But that wouldn’t work for my purposes because you can right click on it and save it as an image.

Working buttom-up, I wrote the code that reads a JPEG image pixel by pixel and feeds it to the browser. Executing the below code will print the number of horizontal pixels in the image (space separator), followed by the number of vertical pixels (space separator) then followed by 6 character hex codes (no delimiters) representing the color of each pixel from left to right.

$im = imagecreatefromjpeg('test.jpg');

$sx = imagesx($im);
$sy = imagesy($im);

$colors = array();
$num_colors = 0;
echo $sx . ' ' . $sy . ' ';
for ($y = 0; $y < $sy; $y++){
    for ($x = 0; $x < $sx; $x++){
        $color = imagecolorat($im, $x, $y);
        $r = ( $color >> 16 ) & 0xFF;
        $g = ( $color >> 8 ) & 0xFF;
        $b = $color & 0xFF;
        printf("%'02X%'02X%'02X", $r, $g, $b);

This is grossly inefficient. A 10.4 KB JPEG turns into 241.41 KB. There are a number ways to makes this more efficient, like echoing out $r, $g, and $b values to the screen as characters (they’re 8 bits after all) then building the hex value in Javascript. In that case you get other issues like characters that you aren’t really supposed to use (e.g. null string).

I used GD to generate the colors from the image. I would have preferred ImageMagick; it looks like the PixelIterator would be more efficient. But my webhost doesn’t have the php extension (shamefully I don’t have it installed on my computer either). Either way you only need to generate the colors file once then can statically feed it to the renderer.

The rendering code is fairly basic. Assuming the above color data is loaded into the variable data then the result will be an imgdiv variable containing a DOM div element with the entire image rendered in divs.

var i = 0;
var sx = '';
var sy = '';
var ca = data.charAt(i);
while( ca != ' '){
	sx += ca;
	ca = data.charAt(++i);
sx = parseInt(sx);
ca = data.charAt(++i);
while( ca != ' '){
	sy += ca;
	ca = data.charAt(++i);
sy = parseInt(sy);
var color = '';
var imgdiv = document.createElement('div');
for(var y = 0; y < sy; y++){
	for(var x = 0; x < sx; x++){

		for (var j = 0; j < 6; j++){
			color += data.charAt(++i);

		var newdiv = document.createElement('div');
		newdiv.setAttribute('style', 'background-color:#'+color);
		newdiv.setAttribute('class', 'r');
		if (x == 0) {
			newdiv.setAttribute('class', 'r fp');
		else {
			newdiv.setAttribute('class', 'r');
		color = '';

Styles that I used to force the images to be 1 pixel:

div.r {
	width: 1px;
	height: 1px;
div.fp {

So… did it work? Short answer is yes, but it takes so much processing power for the browser to render it that it makes the process not worth it. You can see for yourself: render.html It takes me a notch less than 10 seconds to load & render that page, it may crash your browser if you’re running on a slow machine. This probably can be optimized, but the image is only 206×200. I hate to think what happens at 400×400 when there are 4 times as many pixels to render.

The real bottleneck is the browser, it’s not made to display thousands of 1 pixel <div> tags. With a sigh, I thought of a next idea: Why not split the jpeg into many other jpegs (say, 1 image into 100) then load them next to each other? This naturally follows: Why not scramble the image, like this puzzle, then use background position style to reassemble back on the page? Although not as cool as rendering everything in JS, this may provide some level of deterrence against image copying. I’ll make another post if I implement this idea.

IDEA: automatically untag facebook photos

Perhaps this will never reach implementation stage, but here’s a nifty idea: automatically untag yourself from facebook photos. I remember the photo tags section of the API having a delete function. It looks like this is no longer the case. So I can’t exactly put this in a script to run as a cron job.

However we can still probably scrape the page and click the link programmatically. First step would be to query the facebook photo tag API and get a list of photos where you’re tagged. The list contains a link to each photo in facebook. From here we have to options.

  1. Click on the “remove tag” button and record the http request. Reverse engineer it to see if we can replay with with a unique ID of another photo. If that is the case then great, the only thing that’s stopping us are session cookies.
  2. Option 2 is just to click “remove tag” button via some software. People already had ideas like that but the testing software package Selenium comes to mind. It can find the “remove tab” by itself and click it.

I was about to implement this idea, but realized that my privacy settings already allow only me to see photos that I’m tagged in. So this effort would be for vanity since people can’t see my photos anyway.

If any of you would actually like to see this done hit my up on twitter @pavel987 and I’ll probably be motivated enough to write it.