需求来源

项目开发过程中，你可能会遇到用户需要保存当前页面的内容，但是用户又不想自己通过手机系统手动截图；又或者，你想分享当前页面的内容，把它当做一个海报分享，那这个时候就需要通过程序员来帮你完成前期操作，这个时候就用到了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.Theres 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的。

搬你想搬，盖你所需，码字不易，且行且珍惜！