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了
效果對比大小一樣
![修改後]()
第一次寫博客，望斧正