2

所以基本上，我使用的是一个简单的库，叫做HTML2Canvas

这是我当前运行良好的代码，并且正在onclick从按钮的事件中调用：

function saveForm()
{
    html2canvas(document.body, {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
            }
        });
}

基本上，它所做的只是截取屏幕截图并将其附加到页面底部。

已经有一个与此类似的问题，尽管答案不起作用并且下载始终是损坏的 jpg 文件： html2canvas 保存为 jpeg 而无需在浏览器中打开

有没有办法在这个函数中强制下载而不是将其附加到页面底部？

4

2 回答 2

1
  1. 用于canvas.toDataURL获取画布内容作为图像 src
  2. 打开一个窗口/弹出窗口
  3. <img>在弹出窗口中添加一个
  4. src为图像分配图像 src
function saveForm() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
            var img = canvas.toDataURL("image/png");
            var open = window.open('','','width=500,height=500')
            open.document.write('<img id="img" style="width="400">');
            open.document.getElementById('img').setAttribute('src', img);
        }
    });
}

测试了里面的代码onrendered，它确实可以工作 - 但不能与 html2canvas 一起使用。

如果您在弹出窗口中右键单击图像 -> 将图像另存为，则保存的图像是有效的。

我使用setAttribute而不是简单的原因src="..."是，如果您将数据 src 分配为字符串，则图像会损坏。

编辑
我知道:(我认为你必须设置 HTTP 标头来强制下载，这只能由服务器完成（如果我错了，请纠正我）。我想到了像这个样机这样的服务器上的“代理”，下载.php：

<?
$src=$_POST['src'];
header('Content-Type: image/png');
header('Content-Disposition: inline; filename="download.png"');
header('Content-Length: '.count($src));
echo $src;
?>

并通过调用它

var img = canvas.toDataURL("image/png");
window.open('download.php?src='+img);

但是你会遇到很多 -Request-URI Too Large消息，除非你所有的画布图像都是图标大小。

第二种方法——可能也是可行的方法——是img通过ajax 保存在服务器上的一个表中，例如使用img src 调用一个脚本来保存它。此调用完成后，您可以调用另一个具有正确标头的服务器脚本来下载图像，包括之前保存的 img src。但这是一种更广泛的方法，您可以自己尝试..？

于 2013-09-19T13:15:32.443 回答
0

这是一个基于已接受解决方案的解决方案，可以使用 jQuery 在没有服务器端代码的情况下启用下载按钮。

https://codepen.io/nathansouza/pen/OXdJbo

function download(url){
  var a = $("<a style='display:none' id='js-downloder'>")
  .attr("href", url)
  .attr("download", "test.png")
  .appendTo("body");

  a[0].click();

  a.remove();
}

function saveCapture(element) {
  html2canvas(element).then(function(canvas) {
    download(canvas.toDataURL("image/png"));
  })
}

$('#btnDownload').click(function(){
  var element = document.querySelector("#capture");
  saveCapture(element)
})
于 2021-01-26T22:32:06.557 回答