Проблема с сохранением canvas

#php #javascript #jquery #canvas

                    
Есть div, из содержимого этого div формируется canvas,потом я пытаюсь сохранить это в png

$("#s_img1").click(function (){

 html2canvas($("#tableWrap"), {
            onrendered: function(canvas) {

                theCanvas = canvas;
                document.body.appendChild(canvas);


                $("canvas").attr("id", "canv");
                $("#img-out").append(canvas);

            }
        });
    var data = document.getElementById("canv").toDataURL();

    $.post("process.php", {
imageData : data
}, function(data) {
window.location = data;
  });

   var myCanvas = $(document).find('#canv');
  var myImg = myCanvas.get(0).toDataURL();



alert(myImg);

});


Проблема в том,что консоль дает ошибку на toDataURL();

Uncaught TypeError: Cannot read property 'toDataURL' of undefined


Подскажите в чем проблема? 
Вот process.php

$data = substr($_POST['imageData'], strpos($_POST['imageData'], ",") + 1);
$decodedData = base64_decode($data);
$fp = fopen("canvas.png", 'wb');
fwrite($fp, $decodedData);
fclose();
echo "/canvas.png";


Тут html










 

            

           


    

Ответы

Ответ 1

Проблема том, что при вызове  var myCanvas = $(document).find('#canv');
элемент canv еще  не создано. 
Так будет работать: 

function CallPost(postdatа) {

        $.post("process.php", {imageData: postdatа})
               .done(function (data) {               
                 window.location = 'canvas.png';               
               });
 }    

 $(document).ready(function() {
            $("#s_img1").click(function () {    
                html2canvas($("#tableWrap"), {
                    onrendered: function (canvas) {
                        CallPost(canvas.toDataURL());
                     }
                });        
            });
  });