ファイルを選択するときにダイアログを使わずドラッグ＆ドロップでできれば便利です。Webページ上に画像ファイルをドラッグアンドドロップしたらそれを表示させることができれば便利です。ページ内の要素をＤ＆Ｄで移動させる方法はすぐに見つかったのですが、ファイルをＤ＆Ｄしたときの情報は意外に公開されていなかったので、その方法を解説します。
HTML部分
まずHTML部分を示します。これはdiv要素とcanvas要素に画像ファイルをＤ＆Ｄしたらこれを表示するだけの単純なものです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ファイルをドラッグアンドドロップ</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css" type="text/css" media="all"> </head> <body> <div id = "example" ></div> <canvas id="canvas" ></canvas> <script src="./app.js"></script> </body> </html> |
要素に境界線と一定の幅、高さを持たせます。
style.css
|
1 2 3 4 5 6 7 8 9 10 |
#example { width: 100px; height: 100px; border:1px solid #000; margin-bottom: 20px; } #canvas { border:1px solid #000; margin-bottom: 20px; } |
JavaScript部分
JavaScript部分を示します。
画像ファイルを表示させる
まず通常のdiv要素にＤ＆Ｄしたときの処理を示します。
マウスがドラッグされている間はデフォルトの動作はさせず、なにもしません。
app.js
|
1 2 3 4 5 6 |
let $example = document.getElementById('example'); $example.onDragOver = (ev) =>{ // デフォルトの動作を抑制する ev.preventDefault(); } |
ドロップされたらファイルがドロップされたかを調べます。
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
$example.ondrop = (ev) =>{ // デフォルトの動作を抑制する ev.preventDefault(); // その上で・・・ let types = ev.dataTransfer.types; // ドロップされたのはファイルか？ let isFiles = types.filter(_ => _ == "Files").length > 0; // ファイルなら・・・ if(isFiles){ // 処理の対象はひとつだけ let file = ev.dataTransfer.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = (e) => { let $image = new Image(); $image.src = e.target.result; $image.onload = () => { // 読み込まれたら画像のサイズを取得する let width = $image.width; let height = $image.height; // div要素の幅、高さを画像のサイズにあわせる if($example){ $example.style.width = width + 'px'; $example.style.height = height + 'px'; $example.innerHTML = $image.outerHTML; } } }; } } |
canvas要素に表示させる
canvas要素も同様にやってみることにします。
app.js
|
1 2 3 4 5 6 7 |
let $canvas = document.getElementById('canvas'); let $ctx = $canvas.getContext('2d'); // マウスがドラッグされている間はデフォルトの動作を抑止する $canvas.ondragover = (ev) => { ev.preventDefault(); } |
ドロップされたらドロップされたのはファイルかどうか調べ、ファイルの場合はcanvasのサイズを画像サイズと同じサイズに変更してからdrawImage関数で描画処理をおこないます。
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$canvas.ondrop = (ev) => { ev.preventDefault(); let types = ev.dataTransfer.types; let isFiles = types.filter(_ => _ == "Files").length > 0; if(isFiles){ let file = ev.dataTransfer.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = (e) => { let $image = new Image(); $image.src = e.target.result; $image.onload = () => { // canvasのサイズを画像サイズと同じサイズに変更 let width = $image.width; let height = $image.height; $canvas.width = width; $canvas.height = height; // canvasに画像を描画する $ctx.drawImage($image, 0, 0); } }; } } |
