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：直接绘制和上传图像

1 个答案: