需求来源

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