将一个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>
...全文
197 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

81,122

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧