2014-09-01 60 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對象的新形象。

希望它有幫助!

相關問題