需求：

背景圖片和二維碼還有使用者微信頭像生成一張圖片，可供使用者下載。開啟頁面的時候就是一張圖可以儲存，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 生成的圖片