HTML5 Canvas - 在 Canvas 上绘图，保存上下文并稍后恢复

2022-01-17 00:00:00 canvas javascript html html5-canvas

要求:

现在:在 Canvas 上绘图，然后点击 Save(离线存储 Canvas 状态/绘图 - 但不作为图像).
稍后:打开先前保存的绘图显示的画布，并继续再次绘制.

Now: Draw on a Canvas, and hit Save (store Canvas state/drawing offline - but NOT as image).
Later: Open up the Canvas with previously saved drawing showing, and continue to draw again.

对于绘图，我们通常使用如下代码:

For drawing we normally use code as follows: 

canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
...
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
....

为了稍后恢复 Canvas 状态 - 导出到 Image 没有帮助.
我想将画布恢复到其原始状态，以便以后继续编辑绘图.

In order to restore Canvas state later - exporting to Image does not help.
I want to restore the Canvas to it's original state to continue editing the drawing at a later date.

我猜，Canvas 上下文必须离线导出和存储 - 怎么做?

推荐答案

你最好的办法是使用一个代理来存储绘图命令和执行绘图.
由于浏览器对 Proxy 的支持很差(目前只有 FF)，你必须自己构建 Proxy，要么使用 nosuchmethod，要么构建一个全新的全新 WatchedContext 类Context2D.
我为这个简短的演示采用了最后一个解决方案(WatchedContext 类):

Your best shot here is to use a Proxy that will both store the draw commands and perform the drawings.
Since the browser support for Proxy is very bad (only FF as of today), you'll have to build the Proxy yourself, either by using nosuchmethod, or by building a new brand new WatchedContext Class out of the Context2D.
I took the last solution (WatchedContext Class) for this short demo : 

function WatchedContext(hostedCtx) {
  this.commands= [];
  Context2dPrototype = CanvasRenderingContext2D.prototype;
  for (var p in Context2dPrototype ) {
    this[p] = function(methodName) {
        return function() {
            this.commands.push(methodName, arguments);
            return Context2dPrototype[methodName].apply(hostedCtx, arguments);
        }      
    }(p);
  }  
  this.replay=function() {
    for (var i=0; i<this.commands.length; i+=2) {
      var com = this.commands[i];
      var args = this.commands[i+1];
      Context2dPrototype[com].apply(hostedCtx, args);
    }
  }
}

显然您可能需要一些其他方法(开始/停止录制、清除、...)

Obviously you might need some other method (start/stop recording, clear, ...)

只是一个使用的小例子:

Just a small example of use : 

var cv = document.getElementById('cv');
var ctx=cv.getContext('2d');
var watchedContext=new WatchedContext(ctx);

// do some drawings on the watched context
// --> they are performed also on the real context
watchedContext.beginPath();
watchedContext.moveTo(10, 10);
watchedContext.lineTo(100, 100);
watchedContext.stroke();

// clear context (not using the watched context to avoid recording)
ctx.clearRect(0,0,100,1000);

// replay what was recorded
watchedContext.replay();

你可以在这里看到:

http://jsbin.com/gehixavebe/2/edit?js,output

重播确实有效，并且由于重播存储的命令而重新绘制线.

That the replay does work, and the line is re-drawn as a result of replaying the stored commands.

对于离线存储，您可以使用 localStorage 将命令存储在本地，也可以使用 AJAX 调用或类似方法将它们远程存储在服务器上.

For storing offline you can either store the commands locally using localStorage or store them remotely on a server an use AJAX calls or similar.

相关文章