如何顯示帶有圖片的燈箱彈出窗口？

Question

在下面的代碼中。 單擊保存按鈕后，它要求下載從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>

Answer 1

你可以試試

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

在頁面上添加圖片。 並以相同的方式嘗試將canvas或img（視情況而定）作為URL傳遞給燈箱代碼。

Answer 2

而不是像在這里那樣將訪問者重定向到圖像：

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之類的東西。

如何顯示帶有圖片的燈箱彈出窗口？

問題描述

2 個解決方案

解決方案1
0 2014-01-24 13:36:38

解決方案2
0 已采納 2014-01-24 13:41:02

如何顯示帶有圖片的燈箱彈出窗口？

問題描述

2 個解決方案

解決方案1 0 2014-01-24 13:36:38

解決方案2 0 已采納 2014-01-24 13:41:02

解決方案1
0 2014-01-24 13:36:38

解決方案2
0 已采納 2014-01-24 13:41:02