vue html2canvas 使用坐标截图

刚开始看这个插件还觉得很简单啊，只要照着那个模板套用就可以啦，结果我挖了好几天的坑，哭晕在厕所

首先要说的一个最重要的也是最容易被初学者忽略的问题，就是html2canvas他只能截取当前dom层的图片，意思就是说我有一个div-maxBox有一个背景图片，那我再在这个div-maxBox里面新建一个div-minBox然后截取内部div-minBox的背景，结果截取出来是一片空白的，或者你在div-maxBox定位之后的上方或者下方截取出来的图片一样也是空白的，好了，知道这个我们就可以开始截图啦

html
<div id="displayContain" class="contain" ref="dragContain" :style="{width: contain.xx +'px',height:contain.yy + 'px',backgroundImage:'url('+bgImgUrl+')',}">
</div>

    js

            let displayContain = document.getElementById('displayContain');
            //control距左边的距离
            let tmpL = displayContain.offsetLeft;
            //横向滚动条距左边的距离
            let scrollX = document.querySelector('#controlTest').scrollLeft;
            //contrl的横坐标
            let tmpLeft = parseInt(this.json[i].style.left) + tmpL + leftNavWidth - scrollX;
            //control距上面的距离
            let tmpT = displayContain.offsetTop;
            //纵向滚动条距上面的距离
            let scrollY = document.querySelector('#controlTest').scrollTop;
            //control的纵坐标
            let tmpTop = parseInt(this.json[i].style.top) + tmpT + 71 - scrollY;

            let canvasWidth = this.fontEditorWidth;
            let canvasHeight = this.fontEditorHeight;  
            setTimeout(() => {
                html2canvas(displayContain,{
                    scale: 2,
                    allowTaint: true, //允许污染
                    taintTest: true, //在渲染前测试图片
                    useCORS: true,               //保证跨域图片显示
                    backgroundColor: null,                         
                    width:canvasWidth,           //显示canvas窗口的宽度
                    height:canvasHeight,         //显示canvas窗口的高度
                    // zIndex:-10,
                    // windowWidth:document.body.scrollWidth,   //获取x方向滚动条中的内容
                    // windowHeight:document.body.scrollHeight, //获取y方向滚动条中的内容
                    x:tmpLeft,                                  //页面在水平方向上滚动的距离，没有设置为0
                    y:tmpTop,                    //页面在垂直方向上的滚动距离
                    // x:this.styleDisplay.left,
                    // y:this.styleDisplay.top,
                }).then(canvas => {
                // document.body.appendChild(canvas)
                    let childViewBg = canvas.toDataURL("image/png");
                    // console.log(childViewBg);
                    // console.log(canvas);
                    // this.json[i].bgUrl = childViewBg ;
                    this.childViewBgImg = childViewBg ;
                    this.editorFontVisible = true;
                });
            }, 500);

因为我不是截取的整张图片，我是想动态截图背景图的一部分，所以我用了坐标定位我要截取的背景部分，但是我的坐标原点不知道为什么一直在屏幕可视区域的左上角，所以也是费了一番周折呀，要是想截取整张图片的盆友们，就直接把获取的dom放进去，然后xy的属性不设置就好啦