ファイル入力としてのキャンバス？

Question

私はこの質問が既に存在するかどうかを調べていましたが、おそらくそうではありますが、私は他の場所で見つけることができません。

私は、ウィンドウの大部分を占めるキャンバスを持っています。私はあなたがそれにドラッグするオーディオの波形を表示したいだけです。

私はまだ表示について心配していませんが、主な問題は、キャンバス全体のドロップ領域を持つ程度までファイル入力要素のスタイルを設定する方法がないということです。

これが可能か簡単かどうかはわかりませんが、回答は高く評価されます。

Answer 1

ドラッグアンドドロップのイベントリスナーをキャンバスDOM要素に追加し、イベントオブジェクトからファイル情報を取得する方法があります。

次の例は、入力要素またはドラッグアンドドロップを使用してファイルを選択できるページの例です。 （それはそれなしで動作するように表示されます）

// choose file input: 
 
document.getElementById("audioFile") 
 
.addEventListener("change", chooseFile); 
 

 
// drag and drop: 
 
var canvasEl = document.getElementById("audioCanvas"); 
 
canvasEl.addEventListener("dragenter", catchDrag); 
 
canvasEl.addEventListener("dragover", catchDrag); 
 
canvasEl.addEventListener("drop", dropFile); 
 

 
// event handlers: 
 
function catchDrag(event) { 
 
\t event.dataTransfer.dropEffect = "copy" 
 
\t event.preventDefault(); 
 
} 
 
function dropFile(event) { 
 
    event.preventDefault(); 
 
    if(event.dataTransfer) 
 
     if(event.dataTransfer.files) 
 
      procFile(event.dataTransfer.files[0]); 
 
} 
 
function chooseFile() { 
 
    procFile(this.files[0]); 
 
} 
 

 
// file processing: 
 
function procFile(file) { 
 
    console.log("processing file " + file.name); 
 
}

Choose an audio file 
 
    <label>audio file <input id="audioFile" type="file"></label> 
 
<p> 
 
Or drop onto canvas: <br> 
 
    <canvas id="audioCanvas" width="200" height="100" style="background-color:green"> 
 
</p>

「のdragEnter」のイベントリスナーはオプションかもしれないが、「のdragover」のデフォルトの動作を防止：必要でない場合は、ファイルの入力コードを省略します（ブラウザがドロップされたファイルをスクリプトに渡すのではなく読み込む）必要があるようです。

ドラッグ・アンド・ドロップ・イベント処理のドキュメントをより深く理解して、その動作をよりよく理解することをお勧めします。私がコードを書いたときに必要だったように）