Javascript 如何将画布图像数据复制到其他变量？

我正在开发一个小应用程序，它将用户图像加载到服务器上，让用户选择一个过滤器并返回图像

我需要以某种方式保存没有应用过滤器的初始图像数据

但正如我发现的，在JS中没有自然的方法来复制变量

我试着使用LoDash z.clone（）和一个jQuery函数来实现这一点，但它们不起作用

当我将克隆数据应用于映像时，函数putImageData无法获取克隆数据，因为类型错误

克隆函数似乎忽略了对象类型

代码：

那么，我能在这里做什么

谢谢

使用：

var image = …;
var data = JSON.parse(JSON.stringify(image).data);
var arr = new Uint8ClampedArray(data);
var copy = new ImageData(arr, image.width, image.height);

---

ImageData对象包含一个，而该对象本身包含一个

要克隆此

ArrayBuffer

，您可以使用其

slice

方法，或使用从TypedArray视图中获得的方法：

var ctx=canvas.getContext（'2d'）；
ctx.fillStyle=‘橙色’；
ctx.fillRect（0,0300150）；
var original=ctx.getImageData（0,0300150）；
var copiedData=original.data.slice（）；
var copied=新的图像数据（copiedData、original.width、original.height）；
//现在两者都有相同的值
console.log（原始的.data[25]，复制的.data[25]）；
//但可以独立修改
已复制。数据[25]=0；
console.log（原始的.data[25]，复制的.data[25]）
复制键入数组的正确方法是通过静态函数
从

乙二醇

它还允许您转换类型

var copyAs16Bit = Uint16Array.from(imageData.data); // Adds high byte. 0xff becomes 0x00ff

请注意，当转换为较小的类型时，额外的位会被整数截断。从浮点转换时，复制的是值，而不是位。在有符号和无符号整数之间进行复制时，位被复制，例如
Uint8Array
到
Int8Array
将255转换为-1。当从小int转换为大uint时，例如
Int8Array
到
Uint32Array
将添加位-1变为0xffff

您还可以添加可选的映射功能

// make a copy with aplha set to half.
var copyTrans = Uint8ClampedArray.from(imageData.data, (d, i) => i % 4 === 3 ? d >> 1 : d);

typedArray.from
将创建任何类似数组或可编辑对象的副本。
好的，我成功地复制了数据。但是，当我调用slice并尝试将切片数组分配给currentImageData.data时，我仍然在控制台
normalBtn.onclick=function（）{if（！（currentState.value==converterStates.normal））{currentState.value=converterStates.normal；currentImageData=initialImageData.data.slice（）；context.putImageData（currentImageData，0,0）；console.log（currentImageData.data[25]）；console.log（initialImageData.data[25]）；}@Leonid，在我的回答中，您在哪里看到必须更改imageData的类型Darray？你不能那样做。你需要像我一样创建一个新的imageData。但为了简单起见，请使用第二个代码段。
var copyAs16Bit = Uint16Array.from(imageData.data); // Adds high byte. 0xff becomes 0x00ff

// make a copy with aplha set to half.
var copyTrans = Uint8ClampedArray.from(imageData.data, (d, i) => i % 4 === 3 ? d >> 1 : d);