html2canvas 生成的圖片變模糊解決方案

需求：

背景圖片和二維碼還有用戶微信頭像生成一張圖片，可供用戶下載。打開頁面的時候就是一張圖能夠保存，html2canvas插件便可實現效果，效果是實現了，可是很鬱悶，圖片模糊了。。。。

爲何會模糊？

網上介紹說明是： 原來瀏覽器的window變量中有一個devicePixelRatio的屬性，該屬性決定了瀏覽器會用幾個像素點來渲染1個像素，舉例來講，假設devicePixelRatio的值爲2，一張100x100像素大小的圖片，在retina屏幕下，會用2個像素點的寬度去渲染圖片的1個像素點，所以該圖片在retina屏幕上實際會佔據200x200像素的空間，至關於圖片被放大了一倍，所以圖片會變得模糊。知道了這一點，這個問題也就能理解了。當瀏覽器去渲染canvas的時候，他會用2個像素點的寬度去渲染canvas，所以在大多數retina設備的瀏覽器中會出現繪製的圖片或文字變模糊的狀況。

解決方案

1.先獲取設備的PixelRatio，可參考hidpi-canvas提供的方法getPixelRatio.
2.將canvas的容器擴大PixelRatio倍，再將畫布縮放，將圖像放大PixelRatio倍。

部分代碼

  

在項目中發現生成的圖片仍是有點糊，還真是怪了，再看了下DOM結構，背景圖是放在body中的，那既然背景圖仍是糊，那改爲圖片。在DOM中放一個div,再把圖片放在裏面，div 下的圖片設置樣式{position:absolute;top:0;left:0;width:100%;height:100%:z-index:1;}，生成的圖片的樣式層級設置到最高，發現跟圖片差很少清晰了，終於解決了這個大坑！踩坑的筒子請舉手！！！

轉載請註明：前端錄»html2canvas 生成的圖片變模糊解決方案