你可以序列化/反序列化JavaScript中的畫布對象?Javascript畫布序列化/反序列化?
10
A
回答
3
您可以通過canvas.getImageData()和.putImageData()獲得直接像素訪問。您也可以使用canvas.toDataURL()將圖像序列化到數據URL以發佈到服務器。
這隻適用於較新的瀏覽器。
14
除了getImageData
方法,您可以使用canvas.toDataURL()
來獲取數據URL編碼的PNG。如果您需要序列化爲一個字符串,則無需手動將原始數據轉換爲字符串。您可以通過創建圖像並將src設置爲數據URL來反序列化,然後將其繪製到畫布上。
[編輯,以考慮異步加載(由olliej建議)。]
function serialize(canvas) {
return canvas.toDataURL();
}
function deserialize(data, canvas) {
var img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext("2d").drawImage(img, 0, 0);
};
img.src = data;
}
如果我沒有記錯,一些舊版本的Safari,也許歌劇不支持toDataURL
,但較新版本做。
相關問題
- 1. 序列化GWT畫布
- 2. Json.NET:序列化/反序列化陣列
- 3. 反序列化
- 4. 反序列化
- 5. 反序列化序列
- 6. 序列化/反序列化/ OOP
- 7. JQuery序列化和反序列化
- 8. WCF的XmlElement序列化/反序列化
- 9. boost C++序列化/反序列化
- 10. Android HashMap序列化/反序列化
- 11. 序列化/反序列化MQMessage
- 12. PHP反序列化序列化數據
- 13. WPF BitmapImage序列化/反序列化
- 14. 序列化/反序列化PHP數組
- 15. 火腿不序列化+反序列化
- 16. 部分xml序列化/反序列化
- 17. jQuery序列化和反序列化
- 18. C#XML序列化/反序列化
- 19. 序列化和反序列化規則
- 20. IPC:WM_COPYDATA +序列化/反序列化
- 21. Kryo序列化empy反序列化
- 22. 序列化和反序列化(C#)
- 23. Spring Remoting序列化和反序列化
- 24. C#XML序列化/反序列化
- 25. 序列化/反序列化系統.Uri
- 26. 屬性序列化/反序列化
- 27. 反序列化序列化對象
- 28. Silverlight序列化/反序列化問題
- 29. 序列化/反序列化和Proguard
- 30. J2ME:JSON序列化/反序列化
從技術上說,圖像不能保證同步加載,所以你應該真的在圖像處理器 – olliej 2009-04-20 07:40:38