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

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

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

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

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

実際動作するフォーム

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

ソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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');

function load_image() {
    let file = upload_form_fileselect.files[0];
    if (file === void 0) {
        return;
    }

    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);
}

upload_area.addEventListener('click', function(e){
    upload_form_fileselect.click();
});

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';
    load_image();
});

upload_form_fileselect.addEventListener('change', function(e) {
    load_image();
});

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


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

これで正しいかあいまいでなのですが、画像サイズとcanvasサイズを合わせる為 canvas.style.width = img.width+"px"と処理することで見た目の幅が変化し、canvas.width = img.width;で画像を保持する内部的な幅を変更しています。

実際動作するフォーム

ソースコード

コメント