如何显示带有图像的灯箱弹出窗口？答案

【问题标题】：how to show lightbox popup with image?如何显示带有图像的灯箱弹出窗口？
【发布时间】：2014-01-24 21:42:24
【问题描述】：

在下面的代码中。单击保存按钮后，它要求下载从 Html2canvas 生成的输出图像。如何更改此代码，以便在不要求下载它的情况下使用“灯箱”功能即时生成图像。

我试过了：

<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>

【问题讨论】：

标签： javascript jquery html lightbox html2canvas

【解决方案1】：

而不是像您在此处那样将访问者重定向到图像：

window.location.href = img;

您可以在页面中添加不可见的 (display: none) 图片：

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

并用你的画布图像数据显示它，如下所示：

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

现在，如果没有一些额外的工作，这不会创建一个非常有趣的灯箱，但为此我建议您改用插件。类似Slimbox 或Fancybox。

【讨论】：

感谢马格努斯。一件事我可以在没有这些插件的情况下放置一些边框或制作像灯箱一样的#image。我不想要任何花哨的弹出窗口。
当然。这是<img> 的一些额外样式，您可以使用display: none; position: absolute; top: 20%; left: 20%; z-index: 1000; border: 10px solid #fff; border-radius: 5px; box-shadow: 4px 4px 4px #444;。或者在这里试试jsfiddle.net/8A4rw

【解决方案2】：

你可以试试

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

在您的页面上附加图像。并以同样的方式尝试将 canvas 或 img（在您的情况下）作为您的灯箱代码的 url。

【讨论】：

感谢 rajesh。它只是在同一页面中显示画布 img。而不是作为弹出灯箱。
实际上我没有在我的帖子中使用灯箱代码。因此，试图弄清楚如何注入此功能。