Question

29

Saving div to canvas to image (jpeg) and auto save in server

rated 0 times [ 35] [ 6] / answers: 1 / hits: 5378 / 10 Years ago, sun, february 16, 2014, 12:00:00

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

     });

The autosave works when converting a canvas to image only. I tried to merge it with the html2canvas function so that I can save div-canvas-image. Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ronniem

Add To Favorites

Follow

Total Points: 584

Total Questions: 111

Total Answers: 111

Location: Finland

Member since Sat, Nov 6, 2021

3 Years ago

answered 10 Years ago mireyag · Accepted Answer

You are overwriting the canvas element html2canvas is providing. Try to use that argument directly:

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

  });

})

From the documentation:

The rendered canvas is provided in the callback event onrendered, as
such:

html2canvas(element, {

    onrendered: function(canvas) {

        // canvas is the final rendered <canvas> element

    }

});