将一个div的内容保存为一张图片在本地

qq_18476529 2015-09-16 07:46:25
目前我已经用canvas实现了将div的内容截取出来了,但是不知道怎么获取其生成的canvas对象,或者说能不能用一个空的画布接收已生成的canvas对象。
<!-- 导入js文件 -->
<script src="js/html2canvas.js" type="text/javascript"></script>
<script src="js/canvas2image.js" type="text/javascript" ></script>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>

<body>
<!--新建一个简单的div -->
<div id=textDiv style="width:150px;height:150px;border:1px lightblue solid">
<span>Hello world</span><br>
<span><h2>Micheal Jordan</h2></span>
</div>
<button id = "btnSave">生成画布对象</button><br>
<button id="saveImageBtn" onclick="saveImageInfo()">保存为图片</button>
<button id="downloadImageBtn" onclick="saveAsLocalImage()">保存到本地</button>
<script type="text/javascript">
//生成指定div画布对象
$(function(){
$("#btnSave").click(function(){
html2canvas($("#textDiv"),{
onrendered:function(canvas){
document.body.appendChild(canvas);
alert(canvas);
}
});
});
});
//将画布对象转化为图片格式
function saveImageInfo(){
var image = canvas.toDataURL("image/png");
var w=window.open('about:blank','image from canvas');
w.document.write("<img src='"+image+"' alt='from canvas'/>");
}
//将图片保存到本地
function saveAsLocalImage(){
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image;
}
</script>
</body>
</html>
...全文
128 点赞 收藏 回复
写回复
回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
相关推荐
发帖
Web 开发
创建于2007-09-28

8.0w+

社区成员

Java Web 开发
申请成为版主
帖子事件
创建了帖子
2015-09-16 07:46
社区公告
暂无公告