Javascript HTML5：直接绘制和上传图像

我有一个简单的绘图页，它有一个绘图板和一个上传按钮

我想要的是允许用户通过按下按钮上传他们绘制的图像

我知道如何从数据库方面处理这个问题

我需要html或前端方面的帮助

我的html

<canvas id="c" width="400" height="280"></canvas>
<a id="download-canvas" href="#">Download</a>

---

我想使下载按钮上传按钮，可以上传到自定义目录的文件。我应该更改哪些部分？

我会添加一个不可见的表单，以及一个按钮，当单击不可见的文件输入时，该按钮会触发单击事件

你的HTML

<canvas id="c" width="400" height="280"></canvas>
<a id="download-canvas" href="#">Download</a>
<!-- You may add an invisible file input -->
<form action="/url" method="post">
<input type="file" style="display:none">
<button id="upload">Select file</button>
<button type="submit">Send</button>
</form>

---

uploadButton.onclick=函数{uploadImage；}；如果你不告诉我们你在客户端的一些细节，你就不会得到比这更好的答案。你能告诉我们一些你正在使用的技术吗？您能展示一些代码吗？请提供客户端代码和其他详细信息，以便StackOverflow上的我们更容易帮助您。

<canvas id="c" width="400" height="280"></canvas>
<a id="download-canvas" href="#">Download</a>
<!-- You may add an invisible file input -->
<form action="/url" method="post">
<input type="file" style="display:none">
<button id="upload">Select file</button>
<button type="submit">Send</button>
</form>

(function() {
    var canvas = document.getElementById('c'),
        cxt = canvas.getContext('2d'),
        downloadLink = document.getElementById('download-canvas');

    cxt.fillStyle = 'red';
    cxt.fillRect(100, 50, 200, 200);
    cxt.clearRect(150, 100, 100, 100);

    downloadLink.href = canvas.toDataURL();
    downloadLink.download = "download.png";
    var button = document.getElementById('upload');
    button.addEventListener("click", showForm);


})();

function showForm(){
    $("#upload").click();
}