You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
2.1 KiB
78 lines
2.1 KiB
7 months ago
|
function clearFromLocalStorage() {
|
||
|
localStorage.removeItem(LOCAL_STORAGE_CANVAS_NAME);
|
||
|
localStorage.removeItem(LOCAL_STORAGE_DIMENSIONS_NAME);
|
||
|
}
|
||
|
|
||
|
// }}}
|
||
|
|
||
|
// history {{{
|
||
|
|
||
|
function saveState(undoStack, redoStack, maxHistory) {
|
||
|
if (undoStack.length >= maxHistory) {
|
||
|
undoStack.shift();
|
||
|
}
|
||
|
undoStack.push({
|
||
|
imageData: canvas.toDataURL(),
|
||
|
width: canvas.width,
|
||
|
height: canvas.height
|
||
|
});
|
||
|
redoStack = [];
|
||
|
}
|
||
|
|
||
|
function undo(canvas, ctx, undoStack, redoStack) {
|
||
|
if (undoStack.length > 0) {
|
||
|
const currentState = {
|
||
|
imageData: canvas.toDataURL(),
|
||
|
width: canvas.width,
|
||
|
height: canvas.height
|
||
|
};
|
||
|
|
||
|
redoStack.push(currentState); // Save current state to the redo stack
|
||
|
const lastState = undoStack.pop(); // Get the last state from the undo stack
|
||
|
|
||
|
canvas.width = lastState.width;
|
||
|
canvas.height = lastState.height;
|
||
|
canvas.style.width = canvas.width * zoom + 'px';
|
||
|
canvas.style.height = canvas.height * zoom + 'px';
|
||
|
canvasWidth = canvas.width;
|
||
|
canvasHeight = canvas.height;
|
||
|
|
||
|
const img = new Image();
|
||
|
img.src = lastState.imageData;
|
||
|
img.onload = function() {
|
||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
ctx.drawImage(img, 0, 0);
|
||
|
};
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function redo() {
|
||
|
if (redoStack.length > 0) {
|
||
|
const currentState = {
|
||
|
imageData: canvas.toDataURL(),
|
||
|
width: canvas.width,
|
||
|
height: canvas.height
|
||
|
};
|
||
|
|
||
|
undoStack.push(currentState); // Save current state to the undo stack
|
||
|
const nextState = redoStack.pop(); // Get the last state from the redo stack
|
||
|
|
||
|
canvas.width = nextState.width;
|
||
|
canvas.height = nextState.height;
|
||
|
canvas.style.width = canvas.width * zoom + 'px';
|
||
|
canvas.style.height = canvas.height * zoom + 'px';
|
||
|
canvasWidth = canvas.width;
|
||
|
canvasHeight = canvas.height;
|
||
|
|
||
|
const img = new Image();
|
||
|
img.src = nextState.imageData;
|
||
|
img.onload = function() {
|
||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
ctx.drawImage(img, 0, 0);
|
||
|
};
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// }}}
|
||
|
|