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.

<?php
$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 = '';
		imgdiv.appendChild(newdiv);
	}
}

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

div.r {
	width: 1px;
	height: 1px;
	float:left;
}
div.fp {
	clear:left;
}

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.