我使用了Imgly HTML5 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();
});
插件在图片加载时创建画布元素,使用以下代码:
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;
};
我不确定如何构建调用堆栈来引用每个更改并通过画布中的修改历史向后移动。