Как сохранять canvas, чтобы при его загрузке можно было его изменять?

Question

Как сохранять canvas, чтобы при его загрузке можно было его изменять(рисовать на нем, использовать методы canvas: getImageData и т.д.) ?

Сейчас сохрание и загрузка работает, но при внесении изменений на canvas стирается загруженное изображение

$(document).ready(function () {
        canvas = document.getElementById("canvas");
        context = document.getElementById("canvas").getContext("2d");

        $('#canvas').mousedown(function (e) {
            var mouseX = e.pageX - this.offsetLeft;
            var mouseY = e.pageY - this.offsetTop;
            paint = true;
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
            redraw();
        });

        $('#canvas').mousemove(function (e) {
            if (paint) {
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                redraw();
            }
        });

        $('#canvas').mouseup(function (e) {
            paint = false;
        });

        $('#canvas').mouseleave(function (e) {
            paint = false;
        });

        $("#clear").on("click", clear);
        $("#save").on("click", save);
        $("#custom").on("click", upload);
        $("#read").on("click", uploadImage);


        var clickX = [];
        var clickY = [];
        var clickDrag = [];
        var paint;

        function upload() {
            const realFileBtn = document.getElementById("upload");
            realFileBtn.click();
        }

        function clear() {
            clickX = [];
            clickY = [];
            clickDrag = [];
            paint = false;
            redraw();
            getData()
        }

        function addClick(x, y, dragging) {
            clickX.push(x);
            clickY.push(y);
            clickDrag.push(dragging);
        }

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

            context.strokeStyle = "blue";
            context.lineJoin = "round";
            context.lineWidth = 5;

            for (var i = 0; i < clickX.length; i++) {
                context.beginPath();
                if (clickDrag[i] && i) {
                    context.moveTo(clickX[i - 1], clickY[i - 1]);
                } else {
                    context.moveTo(clickX[i] - 1, clickY[i]);
                }
                context.lineTo(clickX[i], clickY[i]);
                context.closePath();
                context.stroke();
            }
        }
    }
);
function getImage(canvas){
    var imageData = canvas.toDataURL();
    var image = new Image();
    image.src = imageData;
    return image;
}

function save() {
    var image = getImage(document.getElementById("canvas"));
    saveImage(image);
}

function saveImage(image) {
    var link = document.createElement("a");

    link.setAttribute("href", image.src);
    link.setAttribute("download", "canvas");
    link.click();
}

function uploadImage() {
    const files = document.getElementById("upload").files
    var img = new Image();
    img.src = 'canvas.png';
    img.onload = function() {
        context.drawImage(img, 0, 0);
    };
}

function getData() {
    var data = context.getImageData(0, 0, 10, 10).data;
    console.log(data)
}

canvas {
    border: 1px solid #000;
}

#canvas {
    cursor: pointer;
}

.main {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid {
    display: flex;
    flex-direction: column;
    margin-right: 10px;
}

.item {
    margin: 2px 0;
}

#custom-text {
    margin-left: 20px;
    font-size: 10px;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Neural network demo</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="Ui.js"></script>
    <link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="main">
    <div class="grid">
        <button class='item' id="clear">Clear</button>
        <button class='item' type="button" id="save">Save</button>
        <input multiple='true' type="file" id="upload" hidden="hidden"/>
        <button class='item' type="button" id="custom">Upload</button>
        <button class='item' type="button" id="read">Read</button>
    </div>
    <div style="float: left;">
        <span>Field:</span><br/>
        <canvas id="canvas" width="150" height="150"></canvas>
    </div>
</div>
</body>
</html>

БЛОГ НА HUSL

Как сохранять canvas, чтобы при его загрузке можно было его изменять?

Ответы (0 шт):