Search code examples
javascriptjqueryhtmllightboxhtml2canvas

how to show lightbox popup with image?

In the following code. After save button clicked it is asking for download the output image generated from Html2canvas. How to chage this code so that instaed of asking to download it will generate the image on the fly with 'lightbox' feature.

I tried as :

<html>
    <head>
        <meta charset="utf-8"/>
        <title>test2</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
        <script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script type="text/javascript" src="html2canvas.js?rev032"></script> 
        <script type="text/javascript">
            $(window).load(function() {
                $('#load').click(function() {
                    html2canvas($('#testdiv'), {
                        onrendered: function (canvas) {
                            var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                window.location.href = img;

                        }
                    });

                });
            });
        </script>       
    </head>
    <body>  
        <div id="testdiv">
            <h1>Testing</h1>
            <h4>One column:</h4>
            <table border="1">
            <tr>
                <td>100</td>
            </tr>
            </table>
            <br/>
        </div>
        <input type="button" value="Save" id="load"/>
    </body>
</html>
Solution

  • Instead of redirecting the visitor to the image like you do here:

    window.location.href = img;

    You can add an invisible (display: none) image to the page:

     <img src="" id="image" style="display: none; position: absolute; top: 30%; left: 30%; z-index: 1000;" />

    And show it with your canvas image data like so:

    $('#image').attr('src', img).fadeIn(200);

    Now this won't create a very interesting lightbox without some additional work, but for that I would suggest you use a plugin instead. Something like Slimbox or Fancybox.