序列化JavaScript CanvasRenderingContext2D状态数组

Serialising a JavaScript CanvasRenderingContext2D states array

本文关键字：数组 状态 CanvasRenderingContext2D JavaScript 序列化      更新时间：2023-09-26

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

我对上下文对象的理解.save()和.restore()将操纵当前堆栈，尽管有可能序列化堆栈本身吗?我找不到任何方法直接访问接口CanvasRenderingContext2D API上的堆栈

任何帮助或建议将不胜感激

保存/恢复是后进先出堆栈。它只保存状态，不保存内容或路径。

无法检索堆栈本身。在.restore()上，当我们在堆栈的底部时，被静默地忽略。

它不保存任何图像数据，路径等。因此，即使您可以检索整个堆栈，也不能使用它来重新创建绘图。你得到的结果是:

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

您可以保存的是图像数据。例如:

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

注意toBlob()广泛不被支持。

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

也看看例如 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

这些属性可以通过直接指定来检索，或者在循环中执行for并检查的类型来检索。但是，当从文件或数据库中检索时，这些信息的使用将受到相当限制。

还会错过变换矩阵、裁剪区域等

相关文章：