mrdoob/three.js — Issue #1033: Get data from an image
Author: aboeing
Created: 2012-01-06 10:59:06+00:00
State: open

Hi,

I want to get the data from an image. This issue was raised previously here:
https://github.com/mrdoob/three.js/issues/758

However, that solution gives me an "Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1" under Chrome.

(I am trying to use the image data to set data for some particles, e.g color).

Here is the relevant code snippet:

var texture = THREE.ImageUtils.loadTexture( "textures/sprites/spark1.png" );
var imagedata = getImageData( texture.image ); //<-- error occurs here
for ( var i = 0; i < 32*32; i++ ) {
var x = i % 32;
var y = i / 32;
var col = getPixel(imagedata,x,y);
particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: col, program: program } ) );
particle.position.x = (x) * 32 - 512;
particle.position.y = (y) * 32 - 512;
particle.position.z = 0;
particle.scale.x = particle.scale.y = 10;
group.add( particle );
}

The full sample is available here:
http://www.adrianboeing.com/demoscene/test/particleimage/canvas_particles_image.html