需求来源
项目开发过程中,你可能会遇到用户需要保存当前页面的内容,但是用户又不想自己通过手机系统手动截图;又或者,你想分享当前页面的内容,把它当做一个海报分享,那这个时候就需要通过程序员来帮你完成前期操作,这个时候就用到了H5快照功能,具体情况如下。
html源码
<div class="mainBox">
<div class="contentBox" id="need">
<img src="images/1.jpg" />
<div class="mainText1">
菩提本无树,明镜亦非台。<br>
佛性常清净,何处有尘埃!<br>
身是菩提树,心如明镜台。<br>
明镜本清净,何处染尘埃!<br>
菩提本无树,明镜亦非台。<br>
本来无一物,何处惹尘埃!<br>
菩提只向心觅,何劳向外求玄?<br>
听说依此修行,西方只在目前!
</div>
<div class="mainText2">Bodhi has no trees, and a mirror is not a platform.There's nothing in the world, where to get dust!</div>
</div>
<div class="btn">下载</div>
<img src="" class="uploadImg" />
</div>
js源码
截图功能需要依赖于canvas2image.js和html2canvas.js
首先在页面中引入这两个js,当然,如果你需要用到jq,同时还要引入jquery依赖
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/canvas2image.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript">
$(".btn").click(function(){
var need = $("#need").get(0);
html2canvas(need, {
useCORS: true, //允许跨域
allowTaint: false, //允许跨域数据污染'被污染'的canvas
taintTest: true,
scale: 1 //比例,越大分辨率越高,图片越小
}).then(function(canvas) {
// canvas宽度
var canvasWidth = $("#need").width();
// canvas高度
var canvasHeight = $("#need").height();
// 调用Canvas2Image插件
let w = $("#need").width(); //图片宽度
let h = $("#need").height();
// 将canvas转为图片
var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
// var img = Canvas2Image.convertToJPEG(canvas, canvasWidth, canvasHeight)
$(".uploadImg").attr("src",img.src);// 渲染图片,并且加到页面中查看效果
// 保存
saveFile(img.src, 'richer.png');
});
})
// 保存文件函数
var saveFile = function(data, filename){
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
</script>
截取图片不能显示问题
在项目测试过程中,可能有的同学会遇到截取图片,截取成功后文字能显示,但是图片显示不出来的问题。这个问题我在上面的js中也有所标注,主要是跨域问题。
在你设置useCORS: true, 为图,允许跨域的前提下,你的项目还要运行在环境中才能完全显示图片。环境中运行很重要,你可以在本地部署服务,或者放到一个线上的服务器中运行,这样测试,就是ok了,当然,后续你的项目放在正式环境中,那肯定也是ok的。
搬你想搬,盖你所需,码字不易,且行且珍惜!