html2canvas转化成的照片偏位不详细的处理方式

场景1：

难题情况：转化成的照片在1个弹窗里边，假如网页页面沒有翻转条便是一切正常的，可是1旦出現翻转条而且网页页面产生翻转时html2canvas绘图成的照片就会偏位出对应翻转高宽比的白边，以下：

处理方法：
 

楼主查了许多材料，也用了许多方式都没能处理这个难题，1气之下准备科学研究科学研究html2canvas的配备主要参数，果不其然，在配备主要参数RenderOptions下寻找以下配备

眼尖的楼主立马发现了scrollY这个物品。没错，这个毫无疑问是配备偏位量的对吧，既然你是向下偏位我网页页面翻转的高宽比，那我把scrollY设定为负的那不就行了吗，说干就干。因而楼主设定了{scrollY: -window.pageYOffset}，結果产生诡异的事，它倒是不向下偏位了，却刚开始向上偏位，以下

这个全球是如何了，因而楼主又设定{scrollY: 0}，再度查询，处理了。
 

原先，是由于在不设定scrollY的状况下，canvas绘图网页页面时会依据全局性网页页面的翻转状况全自动向下偏位。自然了，scrollX也是1样的道理。

奉上编码：
 

scrollY: 0, 别的的主要参数依据自身状况配备，这个主要参数1定不可以少

var htmlDom = document.getElementsByClassName('dialog_content')[0];

html2canvas(htmlDom, {
    logging: false, //系统日志电源开关，便于查询html2canvas的內部实行步骤
    width: htmlDom.clientWidth, //dom 初始宽度
    height: htmlDom.clientHeight,
    scrollY: 0, 
    scrollX: 0,
    useCORS: true // 【关键】打开跨域配备
}).then(canvas => {
    var url = canvas.toDataURL();//照片详细地址
    htmlDom.appendChild(canvas);
});

场景2：
 

用html2canvas绘图完照片后，自始至终会有个偏位间距，以前的处理方法是设scrollY: 0,scrollX: 0这两个主要参数为0，可是这次如何弄都不好，最终清查出的缘故是由于绘图的box上加了transform:translateX(⑸0%)这个款式。

处理方法：

客户制图的地区无需transform来精准定位，换1种沒有偏位的方法，例如设定百分比或固定不动宽高。

到此这篇有关html2canvas转化成的照片偏位不详细的处理方式的文章内容就详细介绍到这了,更多有关html2canvas转化成照片偏位內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！