如何显示带有图片的灯箱弹出窗口？
[英]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. 单击保存按钮后，它要求下载从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>
2 个解决方案
解决方案1
0 2014-01-24 13:36:38
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. 并以相同的方式尝试将canvas或img（视情况而定）作为URL传递给灯箱代码。
解决方案2
0 已采纳 2014-01-24 13:41:02
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: 您可以在页面上添加不可见的（ display: none ）图像：
<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 . Slimbox或Fancybox之类的东西。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.