保存數據在圖像

我試圖找出一種方法來獲取從我的服務器傳輸到客戶端的一些JSON數據，然後使用JavaScript評估客戶端。保存數據在圖像

現在我用一個簡單的XHR調用來重試一個JSON字符串。這工作正常，但問題是它的阻塞。

我想要做的就是開始使用點播的JavaScript加載如下載我的.js文件：

var head = document.getElementsByTagName("head")[0]; 
    script = document.createElement('script'); 
    script.id = 'myScript'; 
    script.type = 'text/javascript'; 
    script.src = "myScript.js"; 
    head.appendChild(script);

這工作得很好，並沒有阻止頁面加載休息。

然後在「myScript.js」中我有一個onload函數，當頁面加載完成時會觸發這個函數。在這個函數中有一個調用服務器來檢索JSON字符串。

問題是，因爲它是一個onload函數，所以直到頁面加載完成纔會開始檢索此JSON。

所以即時尋找一種方式來開始下載的JSON字符串之前onload事件觸發，但沒有阻止加載頁面。

我的想法是，我想將數據保存到gif serverside中，並開始將其作爲頁面的一部分下載，然後onLoad我將觸發我的函數並使用javascript將gif轉換爲JSON。

希望它有道理！

來源

2011-02-15 sunebrodersen

您可以加載PNG文件並通過javascript和HTML5畫布對象讀取它。要點是將圖像繪製到畫布元素上;然後在繪製完成後通過Javascript讀取它。這裏是我研究的代碼（https://github.com/ijoey/datainimage），它將一個JSON對象序列化爲一個字符串，將該數據存儲到一個數組中，並將其繪製到一個畫布元素上。然後，它將它讀回來。

這裏是我的代碼的鏈接在Github上：https://github.com/ijoey/datainimage/

我開始了與有關如何做到這一點下面的文章： http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html

來源

2012-04-22 23:39:01

看起來很有趣 - 我就給你看看。感謝分享這樣一個老問題:) – sunebrodersen 2012-04-23 07:20:38

不，這沒有意義。你的想法就是這樣。

您想將數據保存爲gif。好吧，我想這是可能的，通過服務器腳本。
你想下載作爲頁面的一部分。好吧，如果它是一個文檔資源/資源（你把它作爲<img>，或者你通過使用new Image通過JavaScript下載它，可能的話）
onload，函數將會被觸發gif將被轉換爲JSON。您的意思，也許你想通過Base64編碼轉換爲數據URL。
??
利潤！

我看不清楚你要實現在第4步是什麼，你之前繼續收穫利潤

gif是否轉換爲JSON服務器端或客戶端？

無論如何，如果你只是希望下載JSON通過XHR不會阻塞頁面加載（也許你的意思包括資產），但之後DOM在內存中，你可以使用DOMContentLoaded事件偵聽器window。由於XHR默認是異步的（除非您另有說明），其他JavaScript操作應該照常進行。順便說一下，如果你有澄清，請將其添加到您的問題。有關如何無阻塞地下載JSON的部分，您可以評論這個答案。

來源

2011-04-17 13:07:02 syockit

保存數據在圖像

回答

相關問題