포스타입 Invisible watermark 세미나 예제

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>안보이는 워터마크</title>
</head>
<body>
<div class="section">
    <div class="section-header">
        <h1>Invisible watermark 샘플</h1>
    </div>
    <div class="section-content">
        <form>
            <table>
                <tr>
                    <td>
                        <input id="file" type="file" accept="image/*">
                    </td>
                    <td>
                        <input type="text" id="text" value="안녕, 포스타입!!">
                        <button id="btn-encrypt" type="button">암호화</button>
                    </td>
                    <td></td>
                    <td>
                        <button id="btn-decrypt" type="button">복호화</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <canvas id="original-canvas"></canvas>
                    </td>
                    <td>
                        <canvas id="text-canvas"></canvas>
                    </td>
                    <td>
                        <canvas id="encrypt-canvas"></canvas>
                    </td>
                    <td>
                        <canvas id="decrypt-canvas"></canvas>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script src="index.js"></script>
</body>
</html>

JavaScript

init();

function init() {
    const originalCanvas = document.getElementById("original-canvas");
    const encryptCanvas = document.getElementById("encrypt-canvas");
    const decryptCanvas = document.getElementById("decrypt-canvas");
    const textCanvas = document.getElementById("text-canvas");

    const originalCanvasContext = originalCanvas.getContext("2d");
    const encryptCanvasContext = encryptCanvas.getContext("2d");
    const decryptCanvasContext = decryptCanvas.getContext("2d");
    const textCanvasContext = textCanvas.getContext("2d");

    const formText = document.getElementById("text");
    const fileInput = document.getElementById("file");

    fileInput.addEventListener("change", function () {
        const fileReader = new FileReader();
        const image = new Image();

        fileReader.readAsDataURL(document.getElementById("file").files[0]);
        fileReader.onload = function (fileEvent) {
            if (fileEvent.target.readyState === FileReader.DONE) {
                image.onload = function () {
                    originalCanvas.width = image.width;
                    originalCanvas.height = image.height;
                    encryptCanvas.width = image.width;
                    encryptCanvas.height = image.height;
                    decryptCanvas.width = image.width;
                    decryptCanvas.height = image.height;
                    textCanvas.width = originalCanvas.width;
                    textCanvas.height = originalCanvas.height;

                    originalCanvasContext.clearRect(0, 0, originalCanvasContext.canvas.width, originalCanvasContext.canvas.height);
                    originalCanvasContext.drawImage(image, 0, 0);
                };
                image.src = fileEvent.target.result;
            }
        }
    });

    const btnEncrypt = document.getElementById("btn-encrypt")
    btnEncrypt.addEventListener("click", function () {

        let text = formText.value;
        textCanvasContext.font =...