Displaying bitmap data

[stormbind]

Hi,

A script has rgb values for every pixel of an image stored in an array - essentially a bitmap, right?

This is displayed in a browser with each pixel being represented as a 1px inline element containing a 1px font character.

And its SLOOOOOOW

Do you have any tips or suggestions on how to better display bitmap data in a web browser?

--Glen

Memoria mihi benigna erit qui eam perscribam

 

[adam0101]

Why wouldn't you do this on the server? Well, anyway, maybe using SVG is faster? This draws a little smiley face if you have Adobe's SVG viewer installed.

-- placeholder.svg --

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"[URL unfurl="true"]http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg[/URL] width="100%" height="100%" version="1.1"
xmlns="[URL unfurl="true"]http://www.w3.org/2000/svg"><g[/URL] id="content"></g></svg>

-- test.html --

<embed id="svgDoc" name="svgDoc" src="placeholder.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="[URL unfurl="true"]http://www.adobe.com/svg/viewer/install/"[/URL] />

<script>
var colors = [
['0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0'],
['0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0'],
['0,255,0','0,255,0','0,0,0','0,255,0','0,0,0','0,255,0','0,255,0','0,255,0'],
['0,255,0','0,255,0','0,0,0','0,255,0','0,0,0','0,255,0','0,255,0','0,255,0'],
['0,255,0','0,255,0','0,0,0','0,255,0','0,0,0','0,255,0','0,255,0','0,255,0'],
['0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0'],
['0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0'],
['0,255,0','0,0,0','0,255,0','0,255,0','0,255,0','0,255,0','0,0,0','0,255,0'],
['0,255,0','0,0,0','0,255,0','0,255,0','0,255,0','0,255,0','0,0,0','0,255,0'],
['0,255,0','0,255,0','0,0,0','0,255,0','0,255,0','0,0,0','0,255,0','0,255,0'],
['0,255,0','0,255,0','0,255,0','0,0,0','0,0,0','0,255,0','0,255,0','0,255,0'],
['0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0'],
['0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0','0,255,0']
];

function draw(colors){
  var doc = document.getElementById("svgDoc").getSVGDocument();
  var group = doc.getElementById("content");
  
  for(var y=0; y < colors.length; y++){
    row = colors[y];
    for(var x=0; x < row.length; x++){
      addPixel(doc, group, row[x], x, y);
    }
  }
}


function addPixel(doc, group, color, x, y){
  var rect = doc.createElement('rect');
  rect.setAttribute('width', 1);
  rect.setAttribute('height', 1);
  rect.setAttribute('x', x);
  rect.setAttribute('y', y);
  rect.getStyle().setProperty('fill', 'rgb(' +color + ')');
  group.appendChild(rect);
}

window.onload = function(){
  draw(colors);
}
</script>

Adam

http://adameslinger.blogspot.com/

 

[stormbind]

Yah, that looks similar, but I really don't want to use plugins unless I write them

--Glen

Memoria mihi benigna erit qui eam perscribam