Question

这是我的问题：我在javascript中创建了一个图像拼贴功能。（我开始使用这篇文章中的一些代码btw：dragging and resizing an image on html5 canvas）

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

这很好用，我可以单独操作每个画布（拖动，调整大小，添加帧等）。但现在，我希望用户能够保存当前的工作。

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

这是函数拼贴（我也将每个实例推送到数组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

该过程逐字地获取每个画布并保存其数据以供稍后导入。

这里使用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>，将img.src设置为您的dataURL JSON，从那里你可以将<img>绘制成onload画布。

Answer 2

将图像的引用（src URL）添加到实例，然后将实例数组序列化为JSON并使用f.ex. localStorage的。

localStorage.setItem("currentwork", JSON.stringify(collage.instances));

然后恢复你需要做的事：

var tmp = localStorage.getItem("currentwork");
collage.instances = tmp ? JSON.parse(tmp) : [];

然后，您需要遍历数组并使用正确的onload处理重新加载图像。最后重新渲染一切。

您可以在客户端存储图像数据吗？是的，但不推荐。这将占用大量空间，如果太多，您将无法保存所有数据，用户可能会拒绝允许更多存储空间等。

保持服务器上图像的链接对于IMO来说是更好的方法。但是，如果您不同意，请查看IndexedDB（或WebSQL虽然已弃用），以获得可在可用空间中扩展的本地存储。 localStorage只能容纳2.5 - 5 mb，即。没有图像数据，只有字符串。每个char占用两个字节，data-uris在顶部增加33％，因此这将很快运行空白...

从多个画布元素中保存当前作品

2 个答案: