JavaScriptでイメージをCanvasにドラッグ & ドロップ

オウルです。

今回は、意外に奥が深く、知っておくと便利なドラッグ&ドロップ

理解を深めるためにイメージを Canvas にドラッグ&ドロップして、そのイメージを使って ”ぬりえ””お絵かき” ができるように JavaScript で実装していきます。

イメージを Canvas にドラッグ & ドロップ

まず、ドラッグ & ドロップのイベントを見てみましょう。

Drag Event

  • dragend
  • dragenter
  • dragexit
  • dragleave
  • dragover
  • dragstart
  • drop

上記の Drag Event の中で、今回使用するのは「dragover」と「drop」の2つです。

dragover

dragover は、ドラッグが有効なドロップ先の上を通過中に発生するイベントです。

drop

drop は、有効なドロップ先にドロップされたときに発生するイベントです。

HTML CSS

HTML

CSS

JavaScript

ローカル環境

ブラウザ: Google Chrome
javascript: ES2015~

dragoverハンドラ定義

リスナーを適切に削除できるように、無名関数を使わず、ここでは handleEvent() 関数を使用します。

試しに Chrome DevTools を使ってイベントの取得と削除を確認してみます。

適切に削除されています。

dropハンドラ定義

ファイルの result プロパティの補足

ファイルの result は、直接 Base64 としてデコードできない文字列を返します。 Base64 でエンコードされた文字列のみを受け取る場合は、文字列から data:*/*;base64, を削除する必要があります。

動作確認(Code Pen)

See the Pen
RwNgrpE
by owl (@blue-owl)
on CodePen.

次回は、イメージを設定した Canvas 上で ”ぬりえ” や ”お絵かき” ができるようにします。

参考サイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA