javascript - 如何回到 HTML5 Canvas 的历史

Question

我有一个使用 Imgly HTML5 Canvas 插件的图像裁剪器。我需要能够为裁剪器设置一个历史堆栈，以便能够撤消裁剪操作。目前，我可以在单击按钮时清除 Canvas ，但我需要能够保留原始图像，并且在裁剪步骤不正确的情况下仅通过 Canvas 中图像的更改历史记录返回。

我有以下内容可以简单地清除 Canvas :

$("#renderButton").click(function() {
        var elem = $(".imgly-canvas");
        var canvas = elem.get(0);
        var context = canvas.getContext("2d");
        $('#file').val('');

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
    });

插件在图像加载时创建 Canvas 元素:

Utils.getImageDataForImage = function(image) {
  var canvas, context;
  canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  context = canvas.getContext("2d");
  context.drawImage(image, 0, 0);
  return context.getImageData(0, 0, image.width, image.height);
};

这用于调整大小:

    Utils.cloneImageData = function(imageData) {
  var i, newImageData, _i, _ref;
  newImageData = this.sharedContext.createImageData(imageData.width, imageData.height);
  for (i = _i = 0, _ref = imageData.data.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
    newImageData.data[i] = imageData.data[i];
  }
  return newImageData;
};

/*
  @param {Object} dimensions
  @param {Integer} dimensions.width
  @param {Integer} dimensions.height
  @returns {HTMLCanvasElement}
*/


Utils.newCanvasWithDimensions = function(dimensions) {
  var canvas;
  canvas = document.createElement("canvas");
  canvas.width = dimensions.width;
  canvas.height = dimensions.height;
  return canvas;
};

/*
  @param {imageData} imageData
  @returns {HTMLCanvasElement}
*/


Utils.newCanvasFromImageData = function(imageData) {
  var canvas, context;
  canvas = document.createElement("canvas");
  canvas.width = imageData.width;
  canvas.height = imageData.height;
  context = canvas.getContext("2d");
  context.putImageData(imageData, 0, 0);
  return canvas;
};

所以我不确定如何构建调用堆栈来引用每个更改并通过对 Canvas 中图像的修改历史返回。

Answer 1

HTML5 Canvas 可以很好地转换为 JSON，然后可用于重新加载 Canvas 。您可以将其存储在全局对象中。

var myObj = window.myObj || {};

myObj = {
    history: [],
    canvas: null
};

获取 Canvas 数据:

myObj.canvas = document.getElementById('canvas-id');
var ctx = myObj.canvas.getContext('2d');
var data = JSON.stringify(ctx.getImageData(0, 0, myObj.canvas.width, myObj.canvas.height));

myObj.history.push(data);

重新加载数据:

var reloadData = JSON.parse(myObj.history[someIndex]);
var ctx = myObj.canvas.getContext('2d');
ctx.putImageData(reloadData, 0, 0);

一旦可以存储/加载数据，棘手的部分就是管理 myObj.history 数组。