如何在jquery中将html2canvas图像保存到系统文件夹

Question

我有一个id为"form1"的表单，其中包含一张图表。现在我正在使用html2canvas来获取此form1的图像。以下是我的代码：

<script type="text/javascript">

      $(document).ready(function () {
          $('#add_button').click(function () {
              alert("hiii");
              $('form1').html2canvas();
              var queue = html2canvas.Parse();
              var canvas = html2canvas.Renderer(queue, { elements: { length: 1} });
              var img = canvas.toDataURL();
              window.open(img);
              alert("Hello");
          });
      });

  </script>

<form id="form1" runat="server">
<div style="padding-left:150px">
  <asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>
</div>
<div style="padding-left:350px"><b>Demo</b></div>
</form>

 <input type="submit" id="add_button" value="Take Screenshot Of Div" " />

我想知道如何将这张图片保存在我的系统硬盘上，请帮助我。

- Ram

---

“系统硬盘”？是在您的服务器还是客户端？ - Guilherme Nascimento

Answer 1

系统硬盘？我不明白，是服务器还是客户端？

客户端

如果你想让用户自动下载图像，你需要修改数据URI方案

尝试这个：

在CSS中添加以下内容：

#myHideFrame {
    position: absolute;
    top: -9999px;
    width: 1px;
    height: 1px;
}

添加Javascript

var img = canvas.toDataURL();
var frame = document.getElementById("myHideFrame");
if(!frame) {
    frame = document.createElement("iframe");
    frame.id = "myHideFrame";
    document.body.appendChild(frame);
}
frame.src = img.replace(/^data[:]image\/(png|jpg|jpeg)[;]/i, "data:application/octet-stream;");

很不幸，这个示例没有显示名称，为了实现这一点，您需要像这样进行操作（用户需要点击链接）：

var img = canvas.toDataURL();
var link = document.createElement("a");
link.download = "photo.png"; //Setup name file
link.href = img.replace(/^data[:]image\/(png|jpg|jpeg)[;]/i, "data:application/octet-stream;");
document.body.appendChild(link);

服务器

如果您想在服务器上进行保存，则需要使用Ajax，以下是使用Jquery的示例：

Javascript文件：

var img = canvas.toDataURL().replace(/^data[:]image\/(png|jpg|jpeg)[;]base64,/i, "");
$.ajax({
    "type": "POST",
    "url": "upload.aspx/UploadImage",
    "data": { 
        "imageData": img //Send to WebMethod
    }
}).done(function(o) {
    console.log(["Response:" , o]); 
});

您的upload.aspx.cs文件需要：

...
[WebMethod()]
public static void UploadImage(string imageData)
{
    string fileNameWitPath = "custom_name.png";
    using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
    {
        using (BinaryWriter bw = new BinaryWriter(fs))
        {
            byte[] data = Convert.FromBase64String(imageData);//convert from base64
            bw.Write(data);
            bw.Close();
        }
    }
}
...

请查看详情：http://www.dotnetfunda.com/articles/show/1662/saving-html-5-canvas-as-image-on-the-server-using-aspnet。本文介绍如何使用ASP.NET将HTML 5画布保存为图像。

- Guilherme Nascimento

---

以下是所需的 PHP 代码：https://gist.github.com/blaues0cke/d5a039e42d2c75c4c15b - Thomas Kekeisen

Answer 2

一种更简单的在客户端保存图像的解决方案是生成图像数据并将其附加到带有download属性的<a>标签上。以下是我的示例： HTML：

<a href="#" class="downloadAsImage hide" download>Download</a>

JS：

$(function() {
    html2canvas($('.main'), {
        onrendered: function(canvas) {
            $('.downloadAsImage').attr('href', canvas.toDataURL()).removeClass('hide');
        }
    });
});

顺便提一下，记住你不能通过JS点击$('.downloadAsImage')，因为它有download属性。

- divix