js如何深拷贝ImageData?


我在做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这里的用法,但是发现这其实是一种浅拷贝...也不行

canvas html5 JavaScript

Jesen9 10 years, 4 months ago

不懂,先关注

插排尾僧人 answered 10 years, 4 months ago

额。。。我在控制台上试了一下,发现 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.题外话,在任何方法中,使用这种需要深拷贝的数据时,必须先深拷贝再修改数据,否则作为参数传入的数据也能被修改

2262243 answered 10 years, 4 months ago

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


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

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

来自东方的鸟 answered 10 years, 4 months ago

Your Answer