Search code examples
javascriptobjectcanvasclonegetimagedata

How to clone ImageData?

This is working, but I feel this code is lengthy. I'm looking for better idea.

var clone = function(imageData) {
  var canvas, context;
  canvas = document.createElement('canvas');
  canvas.width = imageData.width;
  canvas.height = imageData.height;
  context = canvas.getContext('2d');
  context.putImageData(imageData, 0, 0);
  return context.getImageData(0, 0, imageData.width, imageData.height);
};
Solution

  • With TypedArray.prototype.set() you can directly copy the data.

    var imageDataCopy = new Uint8ClampedArray(originalImageData.data);
imageDataCopy.set(originalImageData.data);

    This sets the content of imageDataCopy to be identical to originalImageData.