Copy imageData by value in JavaScript

Question

In my application I have a function that processes Canvas ImageData. It looks something like this:

function processData(imagedata, filters) {
  var data = im         


        

Answer 1

Just thought I would add one more solution to this thread along with a link to the duplicate thread on which I found the solution. I am re-posting it here because, in my case it offered an advantage.

They propose simply cloning the data of the ImageData object with

var dataCopy = new Uint8ClampedArray(imageData.data);

Later, if you want to restore this data to an ImageObject you use

imageData.data.set(dataCopy);

imageData may be the original instance from which you cloned the data or a new ImageData object.

In my case this method is better because I am working with ImageData objects inside of a WorkerThread. WorekerThreads are not allowed access to the canvas object or its context so as far as I can tell the techniques here would not help me. This solution; however, did the trick. Thanks All.

Duplicate Thread Offering Other Solutions.

Answer 2

According to the latest specification ImageData object data attribute is initialized to a Uint8ClampedArray object (instead of earlier used CanvasPixelArray object), so data within ImageData could be easily copied with set method:

function copyImageData(ctx, src)
{
    var dst = ctx.createImageData(src.width, src.height);
    dst.data.set(src.data);
    return dst;
}

Answer 3

I think you should be able to create a copy pretty easily:

function copyImageData(context, original) {
  var rv = context.createImageData(original.width, original.height);
  // would 
  //   rv.data = Array.prototype.slice.call(original.data, 0);
  // work?
  for (var i = 0; i < original.data.length; ++i)
    rv.data[i] = original.data[i];
  return rv;
}

(The first argument is the graphics context.)

Then you can call "processImageData" with a copy:

var newImage = processImageData(copyImageData(context, imageData));

edit — I'll try a fiddle to see whether ".slice()" works on the "data" array - I think it will but it's always good to make sure.