在JavaScript中按值复制imageData

在我的应用程序中，我有一个处理画布图像数据的函数。它看起来像这样：

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

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

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

我一直这样使用它：

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

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

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

但由于imageData对象是通过引用传递的，因此它的工作方式如下：

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

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

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

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

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

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

---

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

我认为您应该能够非常轻松地创建副本：

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

编辑-我将试着查看“.slice（）”是否在“data”数组上工作-我认为它会工作，但确保它总是好的。

根据

ImageData

object

data

属性初始化为一个对象（而不是以前使用的对象），因此，可以使用

set

方法轻松复制

ImageData

中的数据：

---

我只是想在这个线程中再添加一个解决方案，并添加一个指向找到该解决方案的重复线程的链接。我在这里重新发布它，因为在我的情况下，它提供了一个优势

他们建议只需使用

var dataCopy = new Uint8ClampedArray(imageData.data);

稍后，如果要将此数据还原到所使用的ImageObject

imageData.data.set(dataCopy);

imageData可以是从中克隆数据的原始实例，也可以是新的imageData对象

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

---

在将其传递给函数之前，您是否尝试过自己制作副本？我在何处制作副本并不重要，但我只想找到一种简单的制作方法。这是“图像数据”——您从画布上得到的，对吗？如果是这样，它只是一个数组。。。（主要编辑数组）链接到fiddle？这需要使用画布上下文作为ctx，对吗？如果已经具有图像数据url，则不需要画布。可以通过多种方式复制阵列。我认为Chris Wininger下面的答案应该被接受为一个更简单的答案，它只适用于Uint8ClampedArray类，没有人经常使用它，但它确实是问题所要求的，非常简短和简洁。。。