how to show lightbox popup with image?

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

سؤال

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>
هل كانت مفيدة؟

المحلول

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.

نصائح أخرى

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.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top