1. 程式人生 > >網頁轉圖片--- html2canvas截圖

網頁轉圖片--- html2canvas截圖

截圖 lan 網頁轉圖片 https 解決 就是 官方 可用 網頁

  最近有個做在線名片(可保存圖片至本地)的任務,特意研究了一下圖片生成,也踩了幾個坑。特此總結一下,順便分享一下demo:

  鏈接:https://pan.baidu.com/s/1o98UBJO 密碼:s0hz

  其中也遇到了一些坑比如查詢網上的 html2canvas 使用方法,發現很多人總結的方法做出來的圖很模糊,或者不支持移動端。最後發現官方API給的方法可用,但是用官方給的方法的時候裏面有個 => 符號,會導致編輯器報錯。解決方法:把 canvas =>function 改成 function(canvas) 。

  還有一個坑就是該插件會讀取jpg圖片的exif值(iphone和數碼相機拍出來的照片所帶的一個值),然後把帶exif值的圖片旋轉再轉成圖片。這個東西在很多頁面中有引用頭像或jpg圖片的時候會出現。解決方法:改成png,gif等,實在不行就先用exif.js把圖片逆向旋轉一下。(這主要是在iphone手機上會出現:顯示圖片正常,轉成canvas時會旋轉)。具體的exif值我將在下一篇文章中做介紹。

網頁轉圖片--- html2canvas截圖