html2canvas在H5里生成的图片不清晰很模糊的终极解决方案

这文章到现在才出现是因为网上的绝大部分教程都能解决大部分遇到图片不清晰同学的问题，所以没必要再开帖。

本来国内技术论坛就充斥着各种重复复制和转载的文章，一搜技术问题出来100条结果，90条都是重复的，极大浪费大家时间，我是不喜欢干这种事情的。

本帖是解决少部分同学按照教程使用了他人方案以后依然很模糊问题的，其实并非那些教程无效，所以大家依然可以按照诸如以下教程的用dpi和scale参数等方法去尝试解决不清晰问题：

教程1：解决html2canvas截图模糊的问题

教程2：html2canvas生成图片模糊 不清楚？两种解决方法

如果上述办法依然无法解决再来往下看。

基本上尝试了上述方法后依然很模糊的都是要截图的DOM节点宽度设置成为了100%的，这样会导致实际生成的图片宽度就是屏幕的物理宽度，基本上是375px左右，有些人会觉得纳闷，为什么保存后的图片宽度是1000+px，宽度足够但就是很模糊，那是因为基础图片还是只有300多px的宽度，只是因为dpi和scale设置的缘故导致最后得到的图片宽度很大，所以并没有什么用，只是图片变大了，清晰度依然是个问题。

知道问题的原因后就想办法去解决这个问题，可以尝试把要生成图片的DOM复制出来一段，复制后的宽度设为最终要生成的图片真实像素，比如1080px，把里面的元素也跟着此宽度调整好大小和位置，这时候你再调用html2canvas去生成这个复制后的DOM，就会发现图片变得非常清晰了。

但是这样另外一个问题就产生了，H5页面实际宽度只有300多px，而我们把要截图的DOM设为了1080px，里面的元素也是根据1080px去做的布局，这样就导致页面在屏幕宽度范围内展示不全，也会干扰原页面的操作；此时可以把复制出来用来生成截图的元素隐藏起来，让其不干扰原先正常的页面。

比如原DOM的css：

		.result-box{
			position: relative;
			z-index: 9;
			width: 100%;
			}

则复制出来的DOMcss则是：

		.result-box.share{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 7;
			opacity: 0.01;
			width: 1080px;
			}

主要注意两点，所谓的隐藏并非直接display：none；，那样会导致元素没渲染，无法完成截图，截图出来的是空的；所以只能是通过z-index控制层级让其在藏在原DOM下面，然后再加个opacity让其彻底“消失”。这样就实现了不影响原页面的前提下又使生成的图片非常清晰。