Javascriptで画像ファイルを表示しcanvasの幅と高さを取得

ドラックアンドロップでWebブラウザ上に画像を表示することができました。

実際にJavaScriptで動くページになっています。画像ファイルをドロップしてください説明以前にWebページでファイルをアップロードするフォームの作り方を調べたことがあり、その際ファイルをドラックアンドドロップ出来ることを知りました...

こちらはHTMLのimgで画像を表示していますが、canvasで表示することが出来れば画像加工が出来そうなので試してみます。

実際動作するフォーム
ソースコード

実際動作するフォーム

画像ファイルをドロップしてください

ソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Javascriptで画像ファイルを表示しCanvasの幅と高さを取得</title>
        <style type="text/css">

.upload_area_style {
    cursor: pointer;
    text-align:center;
    padding: 10px;
    border-radius:4px;
    font-size:large;
    border:solid 1px #eee;
}
canvas {
    width: 128px;
    height: 128px;
    border:solid 1px #222;
}

        </style>
    </head>
    <body>
        <div id="upload_area" class="upload_area_style" >
            画像ファイルをドロップしてください
        </div>
        <input type="file" id="upload_form_fileselect" name="upfile" multiple="multiple" style="display:none;">
        
        <div id="msg_area"></div>
        <canvas id="canvas"></canvas>
        <script>

let upload_area = document.getElementById('upload_area');
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let upload_form_fileselect = document.getElementById('upload_form_fileselect');

let msg_area = document.getElementById('msg_area');

upload_area.addEventListener('dragenter', function(e){
    upload_area.style.background = '#EEE';
});

upload_area.addEventListener('dragleave', function(e){
    upload_area.style.background = '#DDD';
});

upload_area.addEventListener('drop', function(e){
    upload_form_fileselect.files =  e.dataTransfer.files;
    upload_area.style.background = '#FFF';

    let file = upload_form_fileselect.files[0];

    let reader = new FileReader();
    reader.addEventListener('load', function(e) {
        let img = document.createElement("img");
        img.setAttribute("src", reader.result);
        
        img.addEventListener('load', function(e){
            canvas.width = img.width;
            canvas.height = img.height;
            canvas.style.width = img.width+"px";
            canvas.style.height = img.height+"px";
            ctx.drawImage(img, 0, 0);

            msg_area.innerText = "幅:"+canvas.width+ "高:"+canvas.height;
        });
    });
    reader.readAsDataURL(file);
});

document.addEventListener('dragover',function(e){
    e.preventDefault();
});
document.addEventListener('drop',function(e){
    e.preventDefault();
});


        </script>
    </body>
</html>

実際動作するフォーム

ソースコード

コメント