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

qq_18476529 2015-09-16 07:46:25

目前我已经用canvas实现了将div的内容截取出来了，但是不知道怎么获取其生成的canvas对象，或者说能不能用一个空的画布接收已生成的canvas对象。

<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 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>

...全文