The JSON object parses files into simple structures.
You're basically getting an array of channel values back, I believe.
.putImageData
doesn't work with arrays, but rather with ImageData objects (which may behave like arrays, but are not).
You've got multiple solutions, here, if what you're interested in is sending something to / loading something from the server.
If you want to use XHR, then you can use base64 to go back and forth.
var canvas = getMyCanvas(),
ctx = canvas.getContext("2d"),
encImgData = canvas.toDataURL();
var img = new Image();
img.src = encImgData;
ctx.drawImage(img, 0, 0);
If you want to go through and manually edit that image's pixel-range thereafter, draw it to an offscreen canvas, .getImageData()
to match the width and height of the image you cared about, edit the pixels, and .putImageData()
using the edited object.
But JSON
isn't going to marshal things into specific types for you.
It takes simple data structures, puts them in strings, and outputs those structures into other simple structures.
You can also write a node-modifying function which will be called as each node in the structure is being rebuilt.
If you specifically want to write a function which checks if the node is an array and it's filled with what you assume are per-channel values, and then use ctx.createImageData
, and manually loop through and fill each channel of each pixel with the array value, and then return the constructed ImageData object, you can do that, too, I suppose. But that's not going to do you any favours regarding speed.