search

niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.55k stars 4.8k forks source link

problem implementing html2canvas #131

Closed yosibeck closed 11 years ago

yosibeck commented 11 years ago

I have made the simplest of scripts to try out html2canvas, but can't get it working. After consulting the web and these forums for hours, I have no other choice but bother you with this. This is my php file:

<?php
echo '<! DOCTYPE html>';
echo '<html>';
echo '<head>';

echo '<title>TESTIT</title>';
echo '<script type="text/javascript" src="jquery-1.8.0.min.js"></script>';
echo '<script type="text/javascript" src="html2canvas.js"></script>';
echo '<script type="text/javascript" src="jquery.plugin.html2canvas.js"></script>';

?>

<script type="text/javascript">

$('body').html2canvas(); 
var queue = html2canvas.Parse();  
var canvas = html2canvas.Renderer(queue,{elements:{length:1}}); 
var img = canvas.toDataURL();
window.open(img);

</script>

<?php

echo '</head>';

echo '<body>';

echo '<h1>THIS IS GREAT</h1>';
echo 'This is a test';

echo '</body>'; 
echo '</html>';

?>

In Firebug console I get : TypeError: html2canvas.Parse is not a function What am I doing wrong? YB

niklasvh commented 11 years ago

To render an element with html2canvas, simply call: html2canvas( [ element ], options);

To access the created canvas, provide the onrendered event in the options which returns the canvas element as the first argument, as such:

html2canvas( [ document.body ], {
    onrendered: function( canvas ) {
        /* canvas is the actual canvas element, 
           to append it to the page call for example 
           document.body.appendChild( canvas );
        */
        }
});
yosibeck commented 11 years ago

OK, in the mean time I found what caused the previous error: I did not use $(document).ready(function() { and therefore the "body" element was called before it was rendered and was NULL. Now that I added that I don't get that error.

Now it works fine. Thanks for a great script.

yogeshchandel commented 10 years ago

I have create the Screen shot of current page but in Safari it does not work ... $(document).ready(function() { var target = $('table'); html2canvas(target, { onrendered: function(canvas) { var data = canvas.toDataURL(); window.open(data); // data is the Base64-encoded image } }); }); plz Help me ..........

brcontainer commented 10 years ago

@yogeshchandel you use file:/// protocol or http://? (In html5 apps usually the protocol is file:///)

singhamit0002 commented 10 years ago

HI,

I am implementing html2canvas() in to my CQ5 page but one image is not comming into the screen shot code is is follows - $(document).ready(function(){

html2canvas(document.body,{

    onrendered: function(canvas) {
        $("#target").click(function() {
                var image = new Image();
                image.src = canvas.toDataURL("image/png");
                var url = image.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
                window.open(url,'a.png');
            });             
        }
    });
});

Please help

brcontainer commented 10 years ago

Hi @singhamit0002 Welcome!

Your question sounds like a difficulty and its "NOT A BUG" in "html2canvas" therefore the right time to make this sort of question is spot on: http://stackoverflow.com/questions/tagged/html2canvas (as explained in the "html2canvas" documentation in link named "Questions")

Good luck!