Search code examples
javascriptcanvaspixel

How to convert Array to CanvasPixelArray OR create a CanvasPixelArray object?

I got pixel data of an image in PHP that I would like to transfer to Javascript.

My only problem is that PHP returns a string that I convert in Javascript Array and the ImageData.data is not an Array, but a CanvasPixelArray.

var cvsPixelAr = [arStrFromPHP];
var imgData = ctx.createImageData(dim[0], dim[1]);
imgData.data = cvsPixelAr;

I also tried "new CanvasPixelArray();", but still nothing.

Someone knows a work around? If not I will use web workers to change every single value :-/.

Thanks

Solution

  • I believe you will have to copy the items over piecewise into the final data array:

    var imgData = ctx.createImageData(dim[0], dim[1]);
var d = imgData.data;
for (var i=0,len=d.length;i<len;++i) d[i] = cvsPixelAr[i];