HTML5: 直接画图上传图片

Question

我有一个简单的绘图页面，其中有一个绘图板和一个上传按钮。

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

我知道如何从数据库端处理这个问题。

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

我的html

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

我的JS

(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";
})();

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

Answer 1

我会添加一个不可见的表单和一个按钮，该按钮在单击时触发不可见文件输入上的单击事件。

你的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>

你的 JS

(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();
}

HTML5: 直接画图上传图片

HTML5: Drawing and upload image directly

javascript

jquery

canvas

image-uploading

html5-canvas