将 div 保存到画布到图像 (jpeg) 并自动保存在服务器中

Question

HTML： <div id='mydiv' name='mydiv' width='600' height='600' > <img src="clouds.png"></div>

$(document).ready(function () 
     {
        //alert("save pleaseeeee?");
        $("#save").click(function () 
        {
          html2canvas([document.getElementById('mydiv')],
          {
            onrendered: function (canvas) 
            {
              var canvas = document.getElementById('canvas');
              $.post("save.php", 
              {
                data: canvas.toDataURL("image/jpeg")
              }, 
              function (file) 
              {
                window.location.href =  "download.php?path="+ file
              });
            })
        });
        // end of onclick save
     });

自动保存仅在将画布转换为图像时起作用。我试图将其与html2canvas函数合并，以便我可以保存div-canvas-image。谢谢！

Answer 1

您正在覆盖 html2canvas 提供的 canvas 元素。尝试直接使用该参数：

onrendered: function (canvas) // <- use this argument
{
  /// This is overwriting the rendered canvas
  //var canvas = document.getElementById('canvas');
  $.post("save.php", 
  {
    data: canvas.toDataURL("image/jpeg")
  }, 
  function (file) 
  {
    window.location.href =  "download.php?path="+ file
  });
})

从文档中：

呈现的画布在渲染的回调事件中提供，如 这样：

html2canvas(element, {
    onrendered: function(canvas) {
        // canvas is the final rendered <canvas> element
    }
});