2014-09-01 106 views
-1

我正在使用html5画布。我有以下的js代码json.parse和json.stringify是否相反?

var c2 = document.getElementById("imageView"); 
var ctx2 = c2.getContext("2d"); 
ctx2.strokeRect(10,10, 50, 50);//sample image 

var img = ctx2.getImageData(0, 0, 300, 400); 
data=JSON.stringify(img) 

abc=JSON.parse(data) 
imgcanvas = document.createElement('canvas'); 
imgcanvas.id  = 'image'; 
imgcanvas.width = 300; 
imgcanvas.height = 400; 
container.appendChild(imgcanvas); 
var c = document.getElementById("image"); 
var ctx = c.getContext("2d"); 
ctx.putImageData(abc, 0, 0); 

我期待着与canvas canvas相同的图像。但我没有明白它..

+0

只有当提供给'stringify'的对象完全是JSON可序列化时'JSON.parse'和'JSON.stringify'才会相反。 (它们总是与另一个方向相反) – 2014-09-01 10:58:36

回答

1

当你对对象进行字符串化时,结果是一个对象符号,意思是丢失它的原型 - ImageData。再次解析它会给一个带有原型的JSON对象作为“Object”对象。因此,您不会按照需要获取图像。

现在的情况下,你必须遵循字符串化路线:

1. Create a new object of type ImageData by : var imgData = ctx.createImageData(100,100); //ctx is the context 
2. iterate over all the keys of object returned by result of JSON.parse and set each of imgData.data[i] = theobject.data[key]; 

3.现在用这个imgData对象的新形象。

希望它有帮助!

相关问题