将页面上的内容生成图片，并显示到弹出层中：
不废话，解决方法主要是再js中，html2canvas 方法中，全部拷贝过去就能用

html

   <div class="s-page" id="sPage">
    

    // 需要生成图片的内容区域

  </div>
  <div class="btn-group">
      <div class="layui-btn creat-page-img">生成图片</div>
      <div class="layui-btn share-for-frenid">分享给朋友</div>
  </div>
<!-- 弹窗 -->
    <div class="creat-img-box">
        <div class="show-img flex jsa aic">
            <div class="img-box">
                <img src="" alt="">
                <p>长按图片保存到相册</p>
            </div>
        </div>
    </div>

js

// 生成图片
    $("#page").on('click','.creat-page-img',function(){
        create_img()
    })

    function create_img(){
        var targetDom = document.getElementById("sPage");
        html2canvas(targetDom,{
            allowTaint: false,
            useCORS: true,
            height: targetDom.offsetHeight, // 下面解决当页面滚动之后生成图片出现白边问题
            width: targetDom.offsetWidth,
            windowWidth: document.body.scrollWidth,
            windowHeight: document.body.scrollHeight,
            x: 0,
            y: 0,
            dpi: window.devicePixelRatio * 2, // 解决图片不清晰问题
            scale: 2
        }).then(function(canvas){
            $(".img-box img").attr('src',canvas.toDataURL())
            $(".creat-img-box").show()
        });
    }

今天又遇到一个，这次是直接把弹出层中的内容生成图片，但是随着页面的滚动位置不一样，生成的图片距离顶部又出现白边，上面的方法不生效了。

解决方法

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; // 获取页面滚动高度
html2canvas(targetDom,{
            allowTaint: false,
            useCORS: true,
            height: targetDom.offsetHeight,
            width: targetDom.offsetWidth,
            windowWidth: document.body.scrollWidth,
            windowHeight: document.body.scrollHeight,
            x: 0,
            y: scrollTop, // 用网页滚动的高度定位y轴顶点
            dpi: window.devicePixelRatio * 2,
            scale: 2
        }).then(function(canvas){
            callback(canvas);
        });