細木数子.js

(() => {
    const stretch = true;

    const drawLocalImage = imgData => {
        var canvas = document.querySelector('.drawing-board-canvas')
        var ctx = canvas.getContext('2d')

        var image = new Image();
        var size = Math.min(canvas.width, canvas.height);
        image.onload = function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (stretch)
                ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
            else
                ctx.drawImage(this, (canvas.width - size) / 2, (canvas.height - size) / 2, size, size);
        }
        image.src = imgData;
    };

    const drawFromURL = () => {
        var req = new XMLHttpRequest();
        req.onload = function () {
            drawLocalImage(btoa(req.response));
        }
        req.open("GET", "https://github.com/hmage.png");
        req.responseType = "arraybuffer";
        req.send();
    };

    const drawFromLocalFile = path => {
        var reader = new FileReader();
        reader.addEventListener("load", function () {
            drawLocalImage(this.result);
        }, false);
        reader.readAsDataURL(path);
    };

    (() => {
        var body = document.querySelector("body");

        var fileSelector = document.createElement("input");
        fileSelector.type = "file";

        var drawButton = document.createElement("input");
        drawButton.type = "button";
        drawButton.value = "描画する";
        drawButton.onclick = () => drawFromLocalFile(fileSelector.files[0]);

        var box = document.createElement("div");
        box.appendChild(fileSelector);
        box.appendChild(drawButton);

        body.appendChild(box);
    })();
})();