SOURCE

function render(i) {
      var ele = document.getElementById('source' + i);
      html2canvas(ele, {
        removeContainer: false,
        width: ele.offsetWidth,
        height: ele.offsetHeight,
        // html2canvas源码中计算scrollY用ownerDocument.defaultView.pageYOffset获取，
        // 在本案例中，实际需要中和掉滚动带来的偏移；所以用 -1 * ele.ownerDocument.defaultView.pageYOffset
        scrollY: -1 * ele.ownerDocument.defaultView.pageYOffset
      }).then(function (canvas) {
        document.getElementById('wrapper' + i).appendChild(canvas);
        if (i < 3) {
          render(++i);
        }else{
          // 渲染后恢复弹框滚动
          document.getElementById("box").style.overflowY="auto";
        }
      });
    }
    // 垂直滚动条影响到html2canvas计算元素的X坐标，渲染前禁止弹框滚动
    document.getElementById("box").style.overflowY="scroll";
    render(1);
    

<div class="box" id="box">
    <div>
      <div id="source1" class="source">
        <center>标题</center>
        <p>sdfja的所发生的</p>
      </div>
      <div id="wrapper1" class="wrapper"></div>
    </div>

    <div>
      <div id="source2" class="source">dom2</div>
      <div id="wrapper2" class="wrapper"></div>
    </div>

    <div>
        <div id="source3" class="source">dom3</div>
        <div id="wrapper3" class="wrapper"></div>
      </div>
  </div>

.source{
    display: inline-block;
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
    background: blanchedalmond;
    overflow: hidden; /* 使排版不乱 */
  }
  .wrapper{
    display: inline-block;
  }
  .wrapper>canvas{
    display: block
  }
  .box{
    width: 1200px;
    height: 600px;
    margin: 10px auto;
    border: 1px solid #aaa;
  }