在 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

我已经在我的项目中达到了一个点，我需要能够处理一些 imageData同时仍然可以访问原始数据。我的第一次尝试类似于以下内容：

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

这当然会产生相同的图像数据。

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

Answer 1

根据最新规范 ImageData对象data< /code> 属性初始化为 Uint8ClampedArray 对象（而不是之前使用的 CanvasPixelArray 对象），因此其中的数据ImageData 可以使用 set 方法轻松复制：


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

Answer 2

只是想我会在此线程中添加一个解决方案以及指向我找到解决方案的重复线程的链接。我将其重新发布在这里，因为就我而言，它提供了一个优势。

他们建议简单地克隆 ImageData 对象的数据

var dataCopy = new Uint8ClampedArray(imageData.data);

，如果您想将此数据恢复到 ImageObject，您使用的

imageData.data.set(dataCopy);

imageData 可能是您克隆数据的原始实例或新的 ImageData 对象。

就我而言，此方法更好，因为我正在 WorkerThread 内处理 ImageData 对象。不允许 WorekerThreads 访问画布对象或其上下文，据我所知，这里的技术对我没有帮助。这个解决方案；然而，成功了。谢谢大家。

重复线程提供其他解决方案。

Answer 3

我认为你应该能够很容易地创建一个副本：（

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;
}

第一个参数是图形上下文。）

然后你可以使用副本调用“processImageData”：

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

编辑 - 我会尝试小提琴看看“.slice()”是否适用于“data”数组 - 我认为它会，但确定一下总是好的。

Answer 4

ImageData 构造函数 可用于克隆图像数据。

function cloneImageData(imgData) {
  return new ImageData(imgData.data, imgData.width, imgData.height)
}