how to show lightbox popup with image?

StackOverflow https://stackoverflow.com/questions/21333905

Question

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>
Was it helpful?

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.

OTHER TIPS

You can try 

 $("#containerID").empty().append(canvas); // containerID is the container element for your rendered image

to append image on your page. And in the same way try giving canvas or img (in your case) as url to your lightbox code.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top