将画布下载为 png答案

【问题标题】：Downloading canvas as png将画布下载为 png
【发布时间】：2019-09-29 02:56:40
【问题描述】：

我有一个网页，用户可以在其中签名以接受合同。我有一个使用画布显示的签名框。我想将画布另存为图像，当我右键单击图像时，它会给我一个保存它的选项并且可以完美运行，但是我想将它保存到我的服务器以供以后使用

我已经尝试了很多寻找代码

<div>Signature: <i class="fa fa-pencil" aria-hidden="true" onclick="Signature('jm38s4i1');"></i></div>
                <button onclick="download()">Click me</button>
                <a href="#" id="downloader" onclick="download()" download="image.png">Download!</a>
                <canvas id="Sig-jm38s4i1" class="dig-sig " sig-id-data="jm38s4i1" signed-data="false" width="400" height="100"></canvas>

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

当我点击下载时，它会将图像下载到我的计算机但无法显示，我想要 1. 能够使用它 2. 下载服务器端

编辑： PNG文件包含页面的HTML

【问题讨论】：

使用/^data:image\/[^;]+?/ 而不是/^data:image\/[^;]/。 image/ 之后不只是一个字符。
PNG 文件包含页面的 HTML，这似乎没有帮助
也许，这有帮助：thinking stackoverflow.com/a/10473992/8025468

标签： javascript html

【解决方案1】：

你为什么不阻止这个事件，然后改变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写成download(event)。

【讨论】：

感谢您的回答，但文件还是一样
你能把你的函数名“下载”改成另一个吗？我已将函数名称更改为 down 并且效果很好。
我只是这样做了，我知道不再有错误。但是图像只是白色，文件如下所示：pastebin.com/70XgadP5
使用属性方法更改属性：a.attributes.href.value = canvas.toDataURL(); 像这样
谢谢，它现在似乎可以工作了。我怎样才能让它下载到我服务器上的某个目录而不是客户端 PC 上

【解决方案2】：

<a href="#" id="downloader" onclick="download()" download="image.png">Download!</a>

初始href设置为当前页面，它具有download属性。似乎这会导致点击下载当前页面。

您的 onclick 处理程序更改了 href，但不会阻止默认行为。因此，如果在下载页面后将 href 设置为图像，我不会感到惊讶。如果你第二次点击它，它会起作用吗？

【讨论】：

感谢您的回答，但我仍然得到相同的结果