Javascript 下载画布为png

我有一个网页，用户可以签署接受合同。我有一个使用画布显示的签名框。我想让画布另存为图像，当我右键单击图像时，它为我提供了一个保存它的选项，并且可以完美地工作，但是我想将它保存到我的服务器以供以后使用

我试着到处搜索代码

签名：
点击我

函数下载（）{
document.getElementById（“downloader”）.download=“image.png”；
document.getElementById（“downloader”）.href=document.getElementById（“Sig-jm38s4i1”）.toDataURL（“图像/png”）。替换（/^data:image\/[^；]/，“data:application/octet stream”）；
}

每当我单击“下载”时，它会将图像下载到我的计算机，但它无法显示图像，我想1。能够使用它和2。下载服务器端

编辑：

---

PNG文件包含页面的HTML

初始href设置为当前页面，并具有

下载

属性。这可能会导致单击以下载当前页面

---

您的

onclick

处理程序会更改href，但不会阻止默认行为。因此，如果在下载页面后，href设置为图像，我也不会感到惊讶。如果您第二次单击它，它是否有效？

为什么不阻止该事件，然后更改href，然后再次触发单击

function down(e){
    if(e.isTrusted){
        e.preventDefault()
    }
    document.getElementById("downloader").download = "image.png";
    document.getElementById("downloader").href = document.getElementById("Sig-jm38s4i1").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
    e.target.click()
}

e、 isTrusted告诉您是用户单击还是脚本单击，仅当用户单击时触发e.preventDefault

---

要获取事件参数，必须将onclick作为

下载（事件）

写入，使用

/^data:image\/[^；]+？/

而不是

/^data:image\/[^；]/

。

image/

后面不只是一个字符。PNG文件包含页面的HTML，这似乎没有帮助也许，这有帮助：谢谢你的回答，但是我仍然得到同样的结果谢谢你的回答，但是文件仍然是一样的。你能把你的函数名“下载”改成另一个吗？我把我的函数名改为down，它运行得很好。我刚刚这么做了，我知道我有一个错误。但是，图像是白色的，文件如下所示：使用attributes方法更改属性：

a.attributes.href.value=canvas.toDataURL（）像这样谢谢，它现在似乎正在工作。我如何使它下载到我服务器上的某个目录，而不是客户端PC上的某个目录