html2canvas output selected div PHP

Question

this code almost works
this will output the entire page into a jpg
question: how can i grab only the content inside '#myDiv' and output that as a jpg file?

JS:

$('.myButton').click(function(){
    $('#myDiv').html2canvas();//<< has no effect
    var queue = html2canvas.Parse();
    var canvas = html2canvas.Renderer(queue,{elements:{length:0}});
    var img = canvas.toDataURL();
    img.replace(/^data:image\/(png|jpg);base64,/, "");
    $.post( "postIO.php", {img:img}, function(data) {
        //$('#recieve').append(data);
    }); 
    return false;
});

postIO.php:

$canvasImg = $_POST['img'];    
//$canvasImg = str_replace('data:image/png;base64,', '', $canvasImg);

$data = base64_decode($canvasImg);
$File = "z.jpg"; 
$Handle = fopen($File, 'w');
fwrite($Handle, $data);  
fclose($Handle);

reference from here

James · Accepted Answer · 2012-05-28T03:28:43.980

3

I have download and try html2canvas, then I find out the jquery plugin does not complete (it's does nothing than capture the image and create canvas, no use) so I write capture code myself.

var el = $('div').get(0);

function saveData(dturl){
    //Upload here
    console.debug(dturl);
}

html2canvas.Preload(el, {
    complete: function(image){
        var queue = html2canvas.Parse(el, image, {elements: el}),
            $canvas = $(html2canvas.Renderer(queue, {elements: el}));
        saveData($canvas[0].toDataURL());
    }
});

Hope it help you

so to use with your program you have to write

function saveData(dturl){
    dturl.replace(/^data:image\/(png|jpg);base64,/, "");
    $.post( "postIO.php", {img:dturl}, function(data) {
        //$('#recieve').append(data);
    }); 
}

$('.myButton').click(function(){
    var el = $('#myDiv').get(0); 
    html2canvas.Preload(el, {
        complete: function(image){
            var queue = html2canvas.Parse(el, image, {elements: el}),
                $canvas = $(html2canvas.Renderer(queue, {elements: el}));
            saveData($canvas[0].toDataURL());
        }
    });
});

edited May 28 '12 at 03:28

answered May 28 '12 at 02:20

James

13,571
6
61
83

just put the html2canvas.Preload(el, {}); – James May 28 '12 at 03:24
just put that block to your click – James May 28 '12 at 03:24
like this $('.myButton').click(function(){ html2canvas.Preload(el, {} }; – James May 28 '12 at 03:25
which text? another problem? I try to capture a div and save it, I get an png transparent image with only text – James May 28 '12 at 03:29
i get a background image from css, which is good. but all the text inside the div is missing – t q May 28 '12 at 03:32
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/11803/discussion-between-trinh-hoang-nhu-and-t-q) – James May 28 '12 at 03:40

score 1 · Answer 2 · answered May 28 '12 at 02:19

1

after var canvasImg = canvasRecord.toDataURL("image/jpg");, you may need to replace it using var data = canvasImg.replace(/^data:image\/(png|jpg);base64,/, "");

and is that $canvasImg = $_POST['canvasImg']; instead of $_POST['img']?

answered May 28 '12 at 02:19

Abby Chau Yu Hoi

1,378
3
15
37

you should probably do that in JavaScript instead of PHP to save a couple of bytes – gengkev May 28 '12 at 02:24
it works in that it grabs the entire page, but i want to target a div – t q May 28 '12 at 02:25

html2canvas output selected div PHP

2 Answers2

Linked