html - 使用画布和输入文件上传图像

Question

所以在我开始之前，我会让你知道我已经阅读了这个问题并且我的问题很相似。基本上，我需要能够让用户从计算机上传文件或从网络摄像头拍照，将照片放在画布上并上传。有没有办法改变使用javascript的来源（我想将文件源更改为dataURL）？这是我到目前为止所拥有的。

在主 html 页面中：

<form name="uploadFile" action="upload.php" method="post" enctype="multipart/form-data"    onSubmit="return validate();">
<input type="file" id="imageupload" name="ufile" onKeyPress="return false;">(* jpg,png)
</form>

在一个单独的 JS 文件中，我有：

button2.addEventListener('click', function(){
imgdata=canvas.toDataURL('image/png');
$("#imageupload").attr("src", imgdata);
});

这段代码确实做了应该做的事情（它改变了#imageupload的属性），但这就是如何改变文件的来源。任何帮助，将不胜感激！