添加本地存储以保存画布图

Question

我不知道如何添加本地存储以保存在画布上绘制的图形，因此当重新加载页面时，现有图形将通过本地storafe加载到画布上。我没有经验，所以如果有人可以使用本地存储添加编辑我的代码，我将不胜感激。提前谢谢了！

这是我的JS：

var canvas, ctx,
    brush = {
        x: 0,
        y: 0,
        color: '#000000',
        size: 10,
        down: false,
    },
    strokes = [],
    currentStroke = null;

function redraw () {
    ctx.clearRect(0, 0, canvas.width(), canvas.height());
    ctx.lineCap = 'round';
    for (var i = 0; i < strokes.length; i++) {
        var s =strokes[i];
        ctx.strokeStyle = s.color;
        ctx.lineWidth = s.size;
        ctx.beginPath();
        ctx.moveTo(s.points[0].x, s.points[0].y);
        for (var j = 0; j < s.points.length; j++){
            var p = s.points[j];
            ctx.lineTo(p.x, p.y);
        }
        ctx.stroke();
    }

}
function init () {
    canvas = $('#draw');
    canvas.attr({
        width: window.innerWidth,
        height: window.innerHeight,
    });
    ctx = canvas[0].getContext('2d');


    function mouseEvent (e){
                brush.x = e.pageX;
        brush.y = e.pageY;

        currentStroke.points.push({
            x: brush.x,
            y: brush.y,

        });



        redraw();
    }
    canvas.mousedown(function (e){
        brush.down = true;

        currentStroke = {
            color: brush.color,
            size: brush.size,
            points: [],
        };
        strokes.push(currentStroke);

        mouseEvent(e);
    }) .mouseup(function (e) {
        brush.down = false;

        mouseEvent(e);

        currentStroke = null;
    }) .mousemove(function (e) {
        if (brush.down)
            mouseEvent(e);
    });

    $('#save-btn').click(function () {
        window.open(canvas[0].toDataURL());
    });
    $('#undo-btn').click(function (){
        strokes.pop();
        redraw();
    });
    $('#clear-btn').click(function (){
        strokes = [];
        redraw();
    });

    $('#color-picker').on('input', function () {
        brush.color = this.value;
    });
    $('#brush-size').on('input', function () {
        brush.size = this.value;
    });
    }
$(init);

Answer 1

使用Canvas.js助手你可以简单地做：

const canvas = new Canvas( 'my-canvas' );
canvas.saveToStorage( 'balls' );

哪里

• my-canvas是画布ID
• balls是拯救它的关键

要稍后恢复画布状态：

const canvas = new Canvas( 'my-canvas' );
canvas.restoreFromStorage( 'balls' );

加载Canvas.js：

<script type="text/javascript" src="https://gustavgenberg.github.io/handy-front-end/Canvas.js">

编辑

看完下面的帖子（谢谢你@Shashank）后，我用完整的代码制作了一个jsfiddle来实现连续绘图。它会自动保存mouseup上的最后一个笔划并在刷新时加载它。看看这个！

它使用Canvas.js和Pointer.js：

https://jsfiddle.net/wk5ttqa2/

编辑2

只是为了好玩...这很简单，它可以真正得到：

https://jsfiddle.net/GustavGenberg/1929f15t/1/

请注意，快速移动时不会绘制完整的线条（取决于帧速率）...

Answer 2

Canvas.js会将画布作为图像保存到localStorage，这对您的情况没有帮助，因为您将鼠标事件存储在数组中。

如果您正在寻找一个可以继续绘制画布以及恢复旧（已保存）元素的解决方案，那么您需要在localStorage中存储canvas元素（在您的情况下为strokes数组）并恢复，重新绘制画布。

这是一个演示：

JS FIDDLE DEMO

1. 在画布上画任何东西。
2. 单击底部的“保存到本地存储”按钮。
3. 刷新页面。

要清除localStorage，请清除浏览器缓存。

相关代码更改：

1. 在HTML中添加了一个按钮以保存到本地存储

   <button id="save-to-local-storage">
      Save to local storage
   </button>

2. 将qazxsw poi数组保存到上面按钮单击的本地存储中。 qazxsw poi
3. 在页面刷新时，检查localStorage是否设置了项目，如果是，则重绘画布： strokes

如果您有任何疑问，请告诉我。希望这可以帮助。 :)