javascript - 从多个 Canvas 元素保存当前工作

Question

这是我的问题:我在 JavaScript 中创建了一个图像拼贴功能。 (顺便说一句，我从这篇文章中的一些代码开始:dragging and resizing an image on html5 canvas)

我有 10 个 Canvas 元素堆叠在一起，每个 Canvas 的所有参数(包括 2dcontext、图像数据、位置等)都保存在函数“collage”的实例中。

这工作正常，我可以单独操作每个 Canvas (拖动、调整大小、添加框架等)。但现在我希望用户能够保存当前的工作。

所以我认为也许可以创建一个包含所有对象实例的 blob，然后将该 blob 保存为磁盘上的文件。

这是函数 collage(我还将每个实例推送到数组 collage.instances，以便能够具有编号索引)

function collage() {
  this.canvas_board = '';
  this.canvas = '';
  this.ctx = '';
  this.canvasOffset = '';
  this.offsetX = '';
  this.offsetY = '';
  this.startX = '';
  this.startY = '';
  this.imageX = '';
  this.imageY = '';
  this.mouseX = '';
  this.mouseY = '';
  this.imageWidth = '';
  this.imageHeight = '';
  this.imageRight = '';
  this.imageBottom = '';
  this.imgframe = '';
  this.frame = 'noframe';
  this.img = '';
  collage.instances.push(this);
}
collage.instances = [];

我尝试过这样的事情:

var oMyBlob = new Blob(collage.instances, {type: 'multipart/form-data'});

但这不起作用(仅包含大约 300 位数据)。

有谁可以帮忙吗？或者建议另一种方法来保存当前的拼贴作品。当然，必须能够打开 blob 并重新填充对象实例。

或者也许我让这个变得比它必须的更复杂一点......但我现在陷入困境，所以我会很感激任何提示。

Answer 1

您可以将每个图层的图像数据提取到 DataURL 并将结果保存为 json 对象。

这是一个快速演示:http://codepen.io/gunderson/pen/PqWZwW

该过程实际上会获取每个 Canvas 并保存其数据以供以后导入。

这里使用jquery是为了方便:

$(".save-button").click(function() {
  var imgData = JSON.stringify({
    layers: getLayerData()
  });
  save(imgData, "myfile.json");
});

function save(filecontents, filename) {
  try {
    var $a = $("<a>").attr({
      href: "data:application/json;," + filecontents,
      download: filename
    })[0].click();
    return filecontents;
  } catch (err) {
    console.error(err);
    return null;
  }
}

function getLayerData() {
  var imgData = [];
  $(".layer").each(function(i, el) {
    imgData.push(el.toDataURL("image/png"));
  });
  return imgData;
}

要恢复，您可以使用 FileReader将 JSON 的内容读回浏览器，然后输入 <img>每层s，设置img.src到 JSON 中的 dataURL，然后您可以从那里绘制 <img>进入onload Canvas 。