1、最近做一个移动web,用到html2canvas截图模糊问题一直存在网上找了很久依然没有解决
：原因是devicePixelRatio决定了canvas的清晰度
：网上又有了修改html2canvas源码生成dom元素的宽高倍数var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];
node.setAttribute(html2canvasNodeAttribute + index, index);
return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth*2, node.ownerDocument.defaultView.innerHeight*2, index).then(function(canvas) {
if (typeof(options.onrendered) === "function") {
log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
options.onrendered(canvas);
}
return canvas;
});
这样做出来的结果呢！宽比例变形不可控基本没用 简书html2canvas截图的清晰度问题
（个人也觉得html2canvas是可以的，可是结果就是行不通，可能是因为html2canvas社区对于移动设备的应用没有足够的支持，希望他们能够早点给出针对移动设备的方法）
：在这vue之前我是用Angular写的，遇到这个截图不清晰的问题，导致在Angular写的项目中加入普通的jquery html页面
，结果路由跳转就混乱了，后面重构用了比较火vue 2.0 +webpack构建
进入主题：
我们项目中的解决办法就是修改html meta属性
1、通常我们写移动web的meta是<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
这么截图都会以单倍屏来截图 iphone5 320 、iphone 6 375、 iphone 6plus 414;生成的图片都是模糊的。
本人思路
一、：在截图的时候将需要生成元素或容器再生成一次，将宽高比例都放大一倍，再去用html2canvas去生成图片（问题是：dom元素较多时，中间创建一次，html2canvas本身要创建一次这样会耗太多性能《适合单次、灵活性好》）
二、：针对方法一，另一种方法，就是再截图的时候设置页面 document.body.style.zoom 的倍数这样省去创建的过程，截图完成再缩小回去，确实可生成你想要的图片（会出现两个问题：1、body.style.zoom本身存在兼容性问题，2、截图过程body放大,页面会乱，而且完成后缩放，页面会出问题的）
三、:方法二，对于重复调用是可行性（勉强可用），这就有了第三种方法，我们再需要做截图操作的页面 设置<meta name="viewport" content="1080", initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>,
此时呢：原本页面宽高、字体大小都要重新设置了，其他页面meta还是不用修改（总感觉有点怪怪的，不过这样确实可行，要不是第一次用的是angular,出现路由问题也不会有终极方案）
最终方法 最近一次项目重构用的时Vue SPA(单页面应用，webpack构建)，我们项目中所有的宽高单位时rem为了适配移动端大小设置，这样再（iphone 6）750px宽度的屏幕 1rem = 50px，再index.html script最先设置 document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5
最后设置 <meta name="viewport" content="width=640,height=device-height,initial-scale=0.5,maximum-scale=0.5,user-scalable=no">这里width= 640 iphone 5起用 再把放大倍数缩小这样布局不用修改任何东西就完全OK了
效果对比大小一样
第一次写博客，望斧正