背景
我們經常會遇上動態生成海報的需求，而在Web前端中，生成圖片非Canvas莫屬。但是在實際工作當中，為了追求效率，我們會不可避免地去使用一些JS插件，而html2canvas.js就是一款優秀的插件，它可以輕松地幫你將HTML代碼轉換成Canvas，進而生成可保存分享的圖片。實現了在客戶端對網頁進行截圖的功 能，因為每個瀏覽器渲染頁面的方式都不盡相同，所以生成的圖片也不太一樣。
它不需要來自服務器任何渲染，整張圖片都是在客戶端瀏覽器創建。當瀏覽器不支持Canvas時，將采用Flashcanvas或ExplorerCanvas技術代替實現。以下瀏覽器能夠很好的支持該腳本：Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的瀏覽器。
官網：
https://github.com/niklasvh/html2canvas
https://github.com/omwteam/html2canvas
坑點及解決方案：
https://www.cnblogs.com/wangjishu/p/13292060.html
技術交流群：
https://www.cnblogs.com/padding1015/p/9225517.html
言歸正傳：
在谷歌瀏覽器使用html2canvas對一個div截圖，並生成圖片，效果如下：左邊為div，右邊為生成的圖片
相信眼尖的小伙伴已看到端凝，這對於摩羯座這要求完美的人可是當頭一棒，實屬難受，調整樣式很久，實在找不到樣式上的問題，最后得一位貴人相助，說是字體的原因，這下終於找到路了，果然是字體的原因
姓名二字font-family為simhei（黑體），想了想是否是電腦自帶的字體里沒有simhei，打開電腦自帶的字體查詢，果然沒有simhei，只有黑體-簡、黑體-繁
故改為電腦自帶的字體華文仿宋，然后奇跡般的好了，字體不下移了
雖說字體不下移了，但是每個用戶電腦的字體不盡相同，名稱也不相同，例如我的電腦里字體叫華文仿宋，小伙伴的電腦字體叫仿宋，我的電腦沒有simhei，小伙伴有。。。
故采用終極解決辦法，在項目里加入ttf字體文件
方案請看下篇文章： vue引入外部字體
引入ttf字體后，一切正常，字體能正常顯示，字體不下移，完美收官
引入了字體后，新的問題又來了，字體包都是以M為單位，大約5M ~ 10M，這對瀏覽器的加載速度會收到影響，字體包體積大的問題一直是前端的詬病
解決方案請看下篇文章：開啟文件壓縮