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

我有一个id=“form1”的表单，在这个表单中我有一个图表。现在我使用html2canvas来获取这个表单1的图像。这是我的代码

<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>

$（文档）.ready（函数（）{
$（“#添加按钮”）。单击（函数（）{
警报（“hiii”）；
$（'form1'）.html2canvas（）；
var queue=html2canvas.Parse（）；
var canvas=html2canvas.Renderer（队列，{elements:{length:1}}）；
var img=canvas.toDataURL（）；
窗口打开（img）；
警惕（“你好”）；
});
});

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

客户
如果希望用户自动下载图像，则需要修改

试试这个：

附加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;");

不幸的是，此示例未显示名称，为此，您必须执行类似操作（用户需要单击链接）：

服务器
如果要在服务器上保存，则需要使用
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();
        }
    }
}
...

请参阅详细信息：
在客户端保存图像的一个更简单的解决方案是生成图像数据，并将其附加到带有
下载属性的
标记中

以下是我的例子：

HTML:

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

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

旁注：请记住，您不能通过JS单击
$（'.downloadAsImage'）
，因为它有
download
属性。
“系统硬盘”？在您的服务器或客户端中？以下是您需要的php代码：
<a href="#" class="downloadAsImage hide" download>Download</a>

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