javascript - Canvas 作为文件输入？

Question

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

我有一个 Canvas ，占据了窗口的很大一部分。我只是希望它显示您拖到其上的任何音频的波形。

我还不太担心显示，主要问题是我不知道如何将文件输入元素风格化到它具有整个 Canvas 的放置区域的程度。

我不确定这是否可能或简单，但任何答案将不胜感激!

Answer 1

方法是向 Canvas 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) {
	event.dataTransfer.dropEffect = "copy"
	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”的默认操作似乎是必要的(在没有它的情况下，浏览器加载拖放的文件而不是将其传递给脚本)。

我鼓励您更深入地研究拖放事件处理的文档，以更好地理解它的工作原理。就像我编写代码时需要的那样；)