[rstforums.com] Full HTML Image Genrator

<div id="imagine"></div>

<script>
var img = new Image();
img.src = 'imagine-test.png';

function getImageData(image)
{
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;

    var context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);

    return context.getImageData(0, 0, image.width, image.height);
}

function getPixel(imagedata, x, y)
{
    var position = (x + imagedata.width * y) * 4, data = imagedata.data;
    return { r: data[position], g: data[position + 1], b: data[position + 2], a: data[position + 3] };
}

var imagedata, color, pixarr;

for (var i = 0; i < img.height; i++)
{
    for (var j = 0; j < img.width; j++)
    {
        imagedata = getImageData(img);
        color = getPixel(imagedata, j, i);

        pixarr = document.createElement('div');
        pixarr.innerHTML = '';
        pixarr.style.width = '1px';
        pixarr.style.height = '1px';
        pixarr.style.display = 'inline-block';
        pixarr.style.background = 'rgba('+ color['r'] +','+ color['g'] +','+ color['b'] +','+ color['a'] +')';
        pixarr.style.overflow = 'hidden';
        document.querySelector('#imagine').appendChild(pixarr);
    }
    pixarr = document.createElement('div');
    pixarr.style.clear = 'both';
    document.querySelector('#imagine').appendChild(pixarr);
}
</script>