将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
  });
})

来自documentation：

  

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

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