html2canvas图片模糊,html2canvas样式丢失

　　情景一：

　　背景：生成的图片在一个弹出窗口中。如果页面没有滚动条，这是正常的。但一旦出现滚动条，页面滚动，html2canvas绘制的图片会移出滚动高度对应的白边，如下图：

　　解决办法:

　　楼主查了很多资料，用了很多方法来解决这个问题。一怒之下，他打算研究html2canvas的配置参数。果然，他在配置参数RenderOptions下找到了以下配置。

　　眼尖的房东立刻找到了斯克罗利。没错，这个必须配置offset吧？因为你向下滚动抵消了我页面的高度，如果我把scroll设置为负值不是很好吗？去做吧。于是楼主设置了{ scroll:-window . page yo offset }，结果奇怪的事情发生了。它没有向下移动，而是开始向上移动，如下所示

　　世界怎么了，于是楼主又设置了{scroll: 0}，检查了一遍，就解决了。

　　原来，没有设置scrollY，canvas会根据全局页面的滚动，在绘制页面时自动下移。当然，scrollX也是如此。

　　奉上代码：

　　ScrollY: 0，其他参数根据自己的情况配置，这个参数一定是不可或缺的。

　　var html DOM=document . getelementsbyclassname( dialog _ content )[0]；Html2canvas (HTMLDOM，{logging: false，//log switch，方便查看HTML2画布宽度内部执行过程：HTMLDOM.clientwidth，//DOM原始宽度高度：HTMLDOM.clientheight，scroll: 0，ScrollX: 0，use CORS:true//[重要]开启跨域配置})。然后(canvas={ var URL=canvas . toda taurl()；//图像地址html DOM . appendchild(canvas)；});情景二：

　　用html2canvas画完一张图后，总会有偏移的距离。之前的解决方案是将两个参数scrollY: 0，scrollX: 0 0设置为0，但这次不行。最后找出了原因，因为在绘制的框中添加了style transform:translateX(-50%)。

　　解决办法：

　　用户的绘图区域不是由transform定位的。而是没有偏移量，比如设置百分比或者固定宽度和高度。

　　关于html2canvas生成的图像偏移的不完全解决方案这篇文章到此为止。有关html2canvas生成的图像偏移的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。