Build ImageData array from normal javascript array

Question

I have a series of functions that builds a rgba sequence array, and I'm planning to apply this data to a canvas object. I'm not sure how to convert the rgba (already in 0-255 values) into a proper imageData object that I can use .putImageData with.

var new_canvas = document.createElement('canvas');
var mc_ctx = new_canvas.getContext('2d');
new_canvas.width = 50;
new_canvas.height = 50;
var mc_imageData = mc_ctx.getImageData(0,0, 50, 50);
var mc_px_data = mc_imageData.data;

for ( var i = 0; i <= rgba_array.length; i++ ) {
    mc_px_data[i] = rgba_array[i];
}

mc_ctx.putImageData(mc_imageData, 0, 0);

All i get is white, even though an output of the rgba_array values shows the proper stream of values.

where did rgba_array get defined? are you SURE it contains an ImageData object? what does console.log(rgba_array) show? — Marc B
– Marc B, Commented Aug 12, 2016 at 21:04
@MarcB - rgba_array is probably not an ImageData object then, it's just a normal array with rgba values as the entries, such as 255,0,0,255... (red) etc. — Karric
– Karric, Commented Aug 13, 2016 at 0:03
You can only use putImagedata with an ImageData object. You could fill its data property with you array's values, but you need the ImageData object. — Kaiido
– Kaiido, Commented Aug 13, 2016 at 4:47
@Kaiido - Would you be able to post this as an answer with example? I'm still kinda new to the canvas element. — Karric
– Karric, Commented Aug 13, 2016 at 12:05
Still an hard to answer one... First, an advice : to create an empty ImageData, use the context.createImageData(width, height) method, it's way less heavier than the getImageData()one. Second, in order to be able t elp you, we'll need some info about this rgba_array. Are you sure it does only contain the 50*50 px rgba values (if so rgba_array.length should be 10000). Then, are you sure all its 10000 firsts values are not set to 255 ? If you still don't find your problem, then check that you actually append your canvas and that it should be visible in your doc. — Kaiido
– Kaiido, Commented Aug 15, 2016 at 13:51

MacroMan · Accepted Answer · 2018-05-11 09:49:43Z

3

After you have set the values in mc_px_data, you must convert it to a UInt8ClampedArray and set the data properly or it won't write. The following should work after your for loop (untested)

var new_canvas = document.createElement('canvas');
var mc_ctx = new_canvas.getContext('2d');
new_canvas.width = 50;
new_canvas.height = 50;
var mc_imageData = mc_ctx.getImageData(0,0, 50, 50);
var mc_px_data = mc_imageData.data;

for ( var i = 0; i <= rgba_array.length; i++ ) {
    mc_px_data[i] = rgba_array[i];
}

// New code here:
mc_px_data = new Uint8ClampedArray(mc_px_data);
mc_imageData.data.set(mc_px_data);
mc_ctx.putImageData(mc_imageData, 0, 0);

edited May 11, 2018 at 9:49

answered Jan 18, 2017 at 15:05

MacroMan

2,5061 gold badge28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

moeiscool Over a year ago

you should have posted the complete code with your changes, its really hard to read this way

MacroMan Over a year ago

@moeiscool I've added the original code for completeness as per your suggestion.

Collectives™ on Stack Overflow

Build ImageData array from normal javascript array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related