html2Canvas - 指定DOM结构进行截图

html2canvas.js坑了我N多次，总结一下

这个插件使用了ES6的Promise，在IE系列（11以及以下）版本都不能够使用，但是，你可以借助Polyfill转为ES5，于是勉强还能在IE11上边抢救一下，为什么说是勉强呢，看图吧

上图Chrome，下图IE11.png

注意到了么，就是同样的代码下，字体样式发生了变化，各种指定都不行，还是丑丑的宋体，无法更换。
幸好是在移动端，可以跟IE说拜拜了，不过一个IE倒下了，还有千千万万个"IE"产生，详见
移动端中的IE6，UC中打开Vue SPA 白屏

在项目中碰到需要对指定的DOM进行截屏，那么应该怎么做？
html2Canvas是从用户浏览器的可视画面的左上角开始绘图的
我尝试了一个track，
那就是在生成Canvas前的时候，把目标DOM结构添加以下样式

.target_DOM{
    position:fixed;
    left:0;
    top:0;
}

当截图完毕之后，再去除样式，因为速度很快，所以没有视图上闪烁或网页样式短时间错乱的影响。

各种舒服，想截哪里截哪里。

但是,既然都说了有坑,怎么会让你用的这么舒服呢.
在IOS9测试很正常。
但在IOS10中，使用此属性会出现一个奇怪的BUG ，截取的fixed区域里面可能会出现空白.. Debug了不下十小时后,找到了一些掩盖此BUG的方法,只要用户不把页面拉到最底部时,截屏出来的是正常结果...
如果你也遇到了,不妨把截屏的按钮放在远离页面底部的地方吧。只要拉到底部 ，用户就看不到那个按钮 。不过这样就造成了得人为拉长页面。。。

别走啊，再等等，虽然这样很麻烦，别急啊，这里还需要你更麻烦地操作多一步呢。。
之前说是用户可视画面的区域对吧？那要是画面太大，只看到一半怎么办？截出来的也只有一半啊

所以，可以对DOM进行缩小，transform里面的scale()理论上是可行的吧？我没试过，我的解决方法是，让DOM里面的元素都保持足够小，以适应你要测试的最小屏幕能完全容纳为止。然后问题来了，截图出来也会很小啊，那此时怎么把图放大？
——通过操作Canvas.context来缩放

献上代码参考

          var targetBlock=document.getElementById('ImgScene');
          var canvasEle=document.createElement("canvas");
          var scaleBy=10;    //放大倍数
          var imageBase64;  //存放生成Canvas图片的Base64码
          
          //获取目标DOM的宽高度 * 放大倍数
          canvasEle.width=targetBlock.offsetWidth*scaleBy; 
          canvasEle.height=targetBlock.offsetHeight*scaleBy;
          
          //输出调试，看看尺寸是否正确
          console.log(canvasEle.width+"||"+canvasEle.height);
          console.log(targetBlock.offsetWidth+"||"+targetBlock.offsetHeight);

          //使用canvasEle.context进行放大
          var context = canvasEle.getContext('2d');
          context.scale(scaleBy, scaleBy);

          html2canvas(targetBlock, {
              canvas:canvasEle,
              onrendered: function(canvas) {
                  imageBase64=canvas.toDataURL("image/png");

                  //输出Canvas到网页，查看最终输出结果
                  var pHtml=new Image();
                  pHtml.src=imageBase64;
                  document.body.appendChild(pHtml);
              },