Как сохранить изображение на холсте после перезагрузки страницы, вызванной функцией щелчка?

Question

У меня в проекте два холста для отображения изображений.Первый отображает изображение после загрузки.Я пытаюсь продублировать это изображение на втором холсте после щелчка, чтобы проанализировать изображение.Я замечаю, что при нажатии изображение дублируется, но оно исчезает, когда функция заканчивается и страница перезагружается.Не могли бы вы найти решение для меня?

Я пытался дождаться загрузки с помощью $ (window) .on ('load'), но это ничего не меняет.

index.ejs

<input type="file" name="filename" id="file-to-google" accept="image/*">

первый холст

<div id="google_canvas_container" class="canvas-container">
    <canvas id="google_canvas">
        Your browser does not support HTML5 Canvas
    </canvas>
</div>

<div class="input-group" id="analyze-with-google">
    <button id="google_submit" class="btn btn-info" >
        Analyser avec GOOGLE
    </button>
</div>

второй холст

<canvas id="newCanvas"></canvas>

scripts.js

const createGoogleCanvas = (canvas ,ctx) => {
    $('#file-to-google').on('change',function() {
        if (this.files && this.files[0]) {
            if (this.files[0].type.match(/image\//)) {
                $('#file_name').attr('value', this.files[0].name);
                const reader = new FileReader();
                reader.onload = function (e) {
                    const img = new Image();
                    img.onload = function () {
                        ctx.canvas.width = img.width;
                        ctx.canvas.height = img.height;
                        ctx.drawImage(img, 0, 0);
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(this.files[0]);
            } else {
                alert('Invalid file type');
            }
        } else {
            alert('Please select a file');
        }
    })
}

$('#file-to-google').on('click',function() {
    const canvas = $('#google_canvas'),
    ctx = canvas.get(0).getContext('2d');
    createGoogleCanvas(canvas ,ctx);
});

$('#analyze-with-google').on('click', function() {
    const imgSrc = document.getElementById('google_canvas')
    copyImage(imgSrc);
})

const copyImage = (imgSrc) => {
    const canvas = document.getElementById('newCanvas');
    const ctx = canvas.getContext('2d');
    let img = imgSrc;
    ctx.drawImage(img, 10, 10);
};