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

2015-09-16 07:46:25 246 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Vue2 项目将网页内容转换为图片并保存到本地 Vue2 项目将网页内容转换为图片并保存到本地**一、常用第三方库**1. **html2canvas** [*主流方案，支持大部分场景*]2. **dom-to-image** [*轻量级替代方案*]**二、实现步骤与示例代码****方案一：使用 html2canvas 实现****1. 基础用法（生成图片并下载）****2. 处理移动端兼容性问题****3. 高级配置（背景透明、跨域图片）****方案二：使用 dom-to-image****1. 生成图片并下载****三、常见问题与解决方案** 阅读详情

目前我已经用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>

...全文