Как сохранить размер кисти и цвет кисти в веб-приложении для рисования

Question

Итак, я хочу создать приложение для рисования, и я смог изменить размер кисти и цвет кисти, однако я хочу сохранить материал, который я рисую, включая размер кисти и цвет кисти. Теперь я могу сохранить точку, которую нарисовал на холсте, но не размер и цвет кисти.

 var canvas;
 var context;
 var color = "black";
 var brushSize = 13;
 var mouseDown = false;


window.onload = function init() {
//Brush Size
var bigBrushSize        = document.getElementById("bigBrush");
bigBrushSize.onclick    = handleBigBrushclicked;

var mediumBrushSize     = document.getElementById("mediumBrush");
mediumBrushSize.onclick = handleMediumBrushclicked;

var smallBrushSize      = document.getElementById("smallBrush");
smallBrushSize.onclick  = handleSmallBrushclicked;
//Brush Color
var redBrushColor       = document.getElementById("red");
redBrushColor.onclick   = handleRedBrushColorclicked;

var blueBrushColor      = document.getElementById("blue");
blueBrushColor.onclick  = handleBlueBrushColorclicked;

var yellowBrushColor    = document.getElementById("yellow");
yellowBrushColor.onclick = handleYellowBrushColorclicked;

var greenBrushColor     = document.getElementById("green");
greenBrushColor.onclick = handleGreenBrushColorclicked;
//Clear Button
var clearButton         = document.getElementById("clearButton");

clearButton.onclick     = handleClearButton;

canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
canvas.onmousedown = handleMouseDown;
canvas.onmouseup = handleMouseUp;
canvas.onmousemove = handleMouseMove;

var coords = localStorage["coords"];
if (coords) {
    coords = JSON.parse(coords);

    for (var i = 0; i < coords.length; i = i + 2) {
        paintToCanvas(coords[i], coords[i + 1]);
    }
}
}


function handleClearButton() {
context.clearRect(0, 0, canvas.width, canvas.height);

localStorage.removeItem("coords");
 }

function handleMouseDown(event) {
paintFromMouse(event);

mouseDown = true;
}

function handleMouseUp(event) {
mouseDown = false;
}

function handleMouseMove(event) {
if (mouseDown) {
    paintFromMouse(event);
}
}

// Bursh Size Start

function handleBigBrushclicked() {

brushSize = 32;

}

function handleMediumBrushclicked() {

brushSize = 16;

}

function handleSmallBrushclicked() {

brushSize = 6;

}

// Brush Size Ends

function paintFromMouse(event) {
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;

paintToCanvas(x, y);

var coords = localStorage["coords"];
if (coords) {
    coords = JSON.parse(coords);
} else {
    coords = [];
}
coords.push(x);
coords.push(y);
localStorage.setItem("coords", JSON.stringify(coords));
}

//color change starts

function handleRedBrushColorclicked() {
color = "red";
}

function handleBlueBrushColorclicked() {
color = "blue";
 }

function handleGreenBrushColorclicked() {
color = "green";
}

function handleYellowBrushColorclicked() {
color = "yellow";
}


// color change ends

function paintToCanvas(x, y) {
context.fillStyle = color;
context.fillRect(x - brushSize / 2, y - brushSize / 2, brushSize, brushSize);

Итак, здесь я использовал локальное хранилище для хранения размера и цвета кисти, предупреждение показывает, что оно работает, но я до сих пор не знаю, как на самом деле их сохранить, а это означает, что если я обновлю свою страницу, на моем холсте ничего не изменится.

var storeColorAndBrush = [color "  ", brushSize]
var store = storeColorAndBrush
localStorage.setItem("store",store)

alert(localStorage.store);

}

Большое спасибо, я новичок.

Answer 1

Вот как я бы это сделал: я добавил бы кнопку "Сохранить", которая при нажатии сохраняет все изображение, а также текущий размер и цвет кисти. Когда вы загружаете страницу, вы рисуете сохраненное изображение на холсте и устанавливаете размер и цвет кисти:

$('.save').on('click',function() {
    var data = context.getImageData(x, y, img.width, img.height).data;
    localStorage.setItem('image', data); // save image data
    localStorage.setItem('brushSize', brushSize);
    localStorage.setItem('color', color);
}); 

в процессе:

brushSize = localStorage.getItem('brushSize');
color = localStorage.getItem('color');
var picture = localStorage.getItem('image');
context.putImageData(picture, 0, 0);