Question

我正在尝试序列化一个画布'状态以保存到一个可以在以后恢复的数据库。我想将数据保存为对象而不是位图文件。

我对上下文对象的理解.save()和.restore()将操纵当前堆栈，尽管可以序列化堆栈本身吗？我无法直接在界面CanvasRenderingContext2D API

上找到任何方式来访问堆栈

非常感谢任何帮助或建议

Answer 1

保存/恢复是LIFO堆栈。它只有saves states，没有内容或路径。

无法检索堆栈本身。当我们位于堆栈底部时，.restore()被忽略。

它不保存任何图像数据，路径等。因此，即使您可以检索整个堆栈，也不能使用它来重新创建图形。所有你得到的就是例如：

stack[0] { fillStyle : #000000, textAlign: start, ... }
stack[1] { fillStyle : #aabb33, textAlign: middle, ... }
stack[2] { ... }

您可以保存的是图像数据。例如by using：

toDataURL()，canvas.toDataURL('image/png');
toBlob() *

请注意， toBlob（）为widely unsupported。

如果想要原始RGB位，也可以使用getImageData()。

同时查看例如 createImageData（）， putImageData（）， drawImage（）。

至于堆栈：

可以在画布外检索和保存的属性是 fillStyle 和 font 等属性。

如果我们转储我们获得的上下文对象，例如Chrome：

                      canvas : [object HTMLCanvasElement]
                         arc : function arc() { [native code] }
                         ... : function ...

#--- Webkit specific:
                 currentPath : {} # Empty even with path.
webkitBackingStorePixelRatio : 1
 webkitImageSmoothingEnabled : true

#--- Attributes part of save() / restore():

                   fillStyle : #000000
                        font : 10px sans-serif
                 globalAlpha : 1
    globalCompositeOperation : source-over
       imageSmoothingEnabled : true
                     lineCap : butt
              lineDashOffset : 0
                    lineJoin : miter
                   lineWidth : 1
                  miterLimit : 10
                  shadowBlur : 0
                 shadowColor : rgba(0, 0, 0, 0)
               shadowOffsetX : 0
               shadowOffsetY : 0
                 strokeStyle : #000000
                   textAlign : start
                textBaseline : alphabetic

可以通过直接指定属性，或者通过在循环中执行并检查 typeof 来检索属性。但是，当从例如，例如，从这种信息中检索时，这种信息的使文件或数据库。

人们也会错过转换矩阵，裁剪区域等。

序列化JavaScript CanvasRenderingContext2D状态数组

1 个答案: