在以下代码中。单击保存按钮后,它要求下载从HTML2Canvas生成的输出图像。如何搅动此代码,以便要求下载它将使用" LightBox"功能即时生成图像。
我尝试了:
<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>
,而不是像您在这里一样将访问者重定向到图像:
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);
现在,这不会在没有其他工作的情况下创建一个非常有趣的Lightbox,但是我建议您改用插件。诸如Slimbox或Fancybox之类的东西。
您可以尝试
$("#containerID").empty().append(canvas); // containerID is the container element for your rendered image
在您的页面上附加图像。并以相同的方式尝试将画布或IMG(在您的情况下)作为Lightbox代码的URL。