如何退回到HTML5 Canvas历史记录 [英] How to step back in HTML5 Canvas history

问题描述

我有一个使用Imgly HTML5 Canvas插件的图像裁剪器.我需要能够为种植者设置历史记录堆栈，以便能够撤消种植操作.当前，我可以在单击按钮时清除画布，但是我需要能够保留原始图像，并且如果裁剪步骤执行不正确，只需回顾一下画布中图像的变化历史即可.

I have an image cropper using Imgly HTML5 Canvas plugin. I need to be able to setup a history stack for the cropper to be able to undo a crop operation. Currently, I can clear the canvas on button click, but I need to be able to retain the original image, and just move back through a history of changes of the image in the canvas, in the event that a cropping step is done incorrectly.

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

I have the following which simply clears the 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元素:

The plugin creates the canvas element on image load with:

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;
};

因此，我不确定如何构建调用堆栈以引用每个更改，并回溯到对画布中图像的修改历史.

So I'm not sure how to build a call stack to reference each change and move back through a history of modifications to an image in the canvas.

推荐答案

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

The HTML5 canvas nicely converts to JSON which can then be used to reload the canvas. You can store this in a global object.

var myObj = window.myObj || {};

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

获取画布数据:

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数组.

Once you can store/load data the tricky part is managing the myObj.history array.

这篇关于如何退回到HTML5 Canvas历史记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！