javascript - 在 JavaScript 中按值复制 imageData

Question

在我的应用程序中，我有一个处理 Canvas ImageData 的函数。它看起来像这样:

function processData(imagedata, filters) {
  var data = imagedata.data;
  //manipulate data with filters
  imageData.data = data;
  return imageData;
}

我一直这样使用它:

var imageData = processData(imageData, {...});

但是因为 imageData 对象是通过引用传递的，所以它也将像这样工作:

processData(imageData, {...}); // no assignment

我在我的项目中遇到了一个问题，我需要能够在处理一些图像数据的同时仍然可以访问原始数据。我的第一次尝试类似于以下内容:

var originalData = imageData;
var processedData = processData(imageData, {...});

这当然会导致相同的图像数据。

所以我的第二个想法是编辑 processsData 函数，以便它以某种方式操作 imageData 的副本，而不是传递的 imageData。我为此所做的所有尝试都失败了，或者效率极低。只是想知道是否有特殊的方法可以做到这一点。提前致谢。

Answer 1

根据latest specification ImageData 对象 data 属性被初始化为 Uint8ClampedArray对象(而不是之前使用的 CanvasPixelArray 对象)，因此可以使用 set 方法轻松复制 ImageData 中的数据:

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