[SOLVED] How I can get imageData (Uint8ClampedArray)?

Hi all!

AshleyR0J0hound

I choose png image via file chooser plugin and I can get dataURI of this image file, but I want to get imageData (Uint8ClampedArray) of this image file. How I can do it?

Construct only deals with numbers and text. You’ll have to do it via JavaScript. You could make it into a plugin later if you like.

Anyways it’s a straight JavaScript problem. Roughly you do this.

1. Create a image

2. Set the source to the data url.

3. When it loads, create a canvas, and draw the image to it.

4. The canvas then has a function to get the image data array.

I don’t know any of the syntax exactly offhand but it’s something you can find online.

Hi R0J0hound

Thank you for answer! This is my solution for getting imageData via converting Blob from File chooser plugin:

-> On file chooser changed: Browser execute javascript:

	"function convertURIToImageData(URI) {
 return new Promise(function(resolve, reject) {
 if (URI == null) return reject();
 var canvas = document.createElement('canvas'),
 context = canvas.getContext('2d'),
 image = new Image();
 image.addEventListener('load', function() {
 canvas.width = image.width;
 canvas.height = image.height;
 context.drawImage(image, 0, 0, canvas.width, canvas.height);
 resolve(context.getImageData(0, 0, canvas.width, canvas.height));
 }, false);
 image.src = URI;
 });
}
var URI ='"&FileChooser.FileURLAt(0)&"';
convertURIToImageData(URI).then(function(imageData) {
 console.log(imageData);
});"