javascript - js如何深拷贝ImageData？

Question

我在做js滤镜，因为要还原滤镜，需要拷贝一份原始的ImageData作备份。
使用过的方法有

oriData = $.extend(true,{},imageData);//拷贝完之后已经不是`ImageData`类型了

oriData = new ImageData(imageData.data,imageData.width,imageData.height);//参考https://developer.mozilla.org/zh-CN/docs/Web/API/ImageData/ImageData这里的用法，但是发现这其实是一种浅拷贝...也不行

Answer 1

你要深拷贝的话这样不行么。。

var temp= new ImageData(imagedata.width, imagedata.height);
temp.data.set(imagedata.data);

其实在我一个项目里我是更想找一个优雅的浅拷贝的方法来提高效率的。。

Answer 2

额。。。我在控制台上试了一下，发现new ImageData 是可以新建一个ImageData对象，但是ImageData.data 对象却依然是浅拷贝，所以只要也 new一个这个就行了。而new Uint8ClampedArray这个构造函数的用法也纯粹是乱试出来的...因为没找到介绍这个对象的文档，也不知道这样的兼容性怎么样，求大大帮忙~~

var copyImageData = function(imgData){
    return imgData && new ImageData(new Uint8ClampedArray(imgData.data),imgData.width,imgData.height);
};

var bb = copyImageData(temp1) //temp1是我通过console.log出来的一个ImageData，在控制台保存为temp1
//=>ImageData {data: Uint8ClampedArray[1218816]}

temp1.data[0]
//=>222

bb.data[0]
//=>222

temp1.data[0] = 189
//=>189

bb.data[0]
//=>222

ps.题外话，在任何方法中，使用这种需要深拷贝的数据时，必须先深拷贝再修改数据，否则作为参数传入的数据也能被修改

Answer 3

不懂，先关注