Javascript 画布作为文件输入？

我一直在四处寻找，看看这个问题是否已经存在，尽管它可能存在，但我似乎在其他任何地方都找不到它

我有一块画布，占据了窗户的很大一部分。我只想让它显示你拖到它上面的任何音频的波形

我还不太担心显示，主要的问题是我不知道如何将文件输入元素的样式化，使其具有整个画布的放置区域

---

我不确定这是可能的还是直接的，但任何答案都将不胜感激

方法是将拖放事件侦听器添加到canvas DOM元素，并从事件对象中提取文件信息

以下示例来自一个页面，该页面允许使用输入元素或通过拖放选择文件。如果不需要，请省略文件输入代码：

//选择文件输入：
document.getElementById（“音频文件”）
.addEventListener（“更改”，选择文件）；
//拖放：
var canvasEl=document.getElementById（“audioCanvas”）；
canvasEl.addEventListener（“dragenter”，catchDrag）；
canvasEl.addEventListener（“dragover”，catchDrag）；
canvasEl.addEventListener（“drop”，dropFile）；
//事件处理程序：
函数（事件）{
event.dataTransfer.dropEffect=“复制”
event.preventDefault（）；
}
函数dropFile（事件）{
event.preventDefault（）；
if（event.dataTransfer）
if（event.dataTransfer.files）
procFile（event.dataTransfer.files[0]）；
}
函数chooseFile（）{
procFile（this.files[0]）；
}
//文件处理：
函数procFile（文件）{
console.log（“处理文件”+文件名）；
}

选择一个音频文件
音频文件

或者放到画布上：

非常感谢您给出如此长而详细的答案！哇！