1

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.

Karric
  • 1,415
  • 2
  • 19
  • 32
  • where did `rgba_array` get defined? are you SURE it contains an `ImageData` object? what does `console.log(rgba_array)` show? – Marc B Aug 12 '16 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 Aug 13 '16 at 00: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 Aug 13 '16 at 04:47
  • @Kaiido - Would you be able to post this as an answer with example? I'm still kinda new to the canvas element. – Karric Aug 13 '16 at 12:05
  • @Karric, unfortunately no, this was an answer to your previous comment, but not to your question. The "*Index Size Error*" might come from the `getImageData` call, because of invalid `mc_width` and `mc_height` values. But you didn't show us where it comes from, and I can only guess that it is something nearby `0` or less. The fact you do use an array instead of an imageData will throw something like "*Argument 1 of putImageData does not implement interface ImageData*", but you'll find it out when your program will be able to reach this line ;-) – Kaiido Aug 14 '16 at 01:21
  • @Kaiido - I've restructured the question. – Karric Aug 15 '16 at 13:23
  • 1
    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 Aug 15 '16 at 13:51

1 Answers1

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);
MacroMan
  • 2,335
  • 1
  • 27
  • 36