前言

早有耳聞這個html2canvas比較坑,但無奈于產品需求的壓迫,必須實現html轉圖片的功能,自此走上了填坑之路,好在最后的效果還算令人滿意,這才沒有誤了產品上線周期.

html2canvas介紹

html2canvas的詳細介紹可以點擊這里查看,其實簡單來說就是通過canvas將HTML生成的DOM節點繪制到畫布上,再可以通過自己的需求轉換成圖片.所以官方文檔也說了,最后生成的效果不是100%相同的,這一點大家要有心理準備,無論怎樣,一點點小瑕疵是肯定有的。

兼容性

PS:微信瀏覽器使用也是沒有問題的哦

使用html2canvas

使用也是十分簡單,官網寫的很清楚戳這里

踩坑過程

生成的圖片里面為什么缺失微信頭像或其他圖片?

其實涉及到的就是跨域問題,即便是canvas的畫布中對于圖片的域也是有要求的,那我們應該怎么解決呢?

html2canvas的配置項中配置 allowTaint:true 或 useCORS:true(二者不可共同使用)

img標簽增加 crossOrigin='anonymous'

圖片服務器配置Access-Control-Allow-Origin 或使用代理

其中第三步是最重要的,不設置則前兩步設置了也無效。

服務器需要配置Access-Control-Allow-Origin信息,如PHP添加響應頭信息，*通配符表示允許任意域名：

header("Access-Control-Allow-Origin: *"); 復制代碼

或者指定域名：

header("Access-Control-Allow-Origin: www.zhangxinxu.com"); 復制代碼

但如果不想麻煩后端的人員,那我們前端怎么跨域呢? 那就可以使用代理插件,如: html2canvas-proxy-nodejs 或者是 superagent，我是使用superagent,貼一下示例代碼:

const request = require('superagent') // 導入 const proxHost = 'https://thirdwx.qlogo.cn' // 指定跨域圖片的地址 app.use('/proxy', function (req, res, next) {let urlPath = req.urlconsole.log('urlPath', urlPath)urlPath = decodeURI(urlPath)if (!urlPath) {console.log('urlPath is null')return next()}console.log('proxy-request: /proxy->' + `${proxHost}${urlPath}`)const reqStream = request.get(`${proxHost}${urlPath}`)reqStream.on('error', function (err) {console.log('error', err)})console.log('------reqStream----')return reqStream.pipe(res) }) 復制代碼

那么最終我在頁面中的圖片的srchttps://thirdwx.qlogo.cn/xxx 要更改為/proxy/xxx 效果圖如下:

2.生成的圖片模糊不清且有鋸齒瑕疵怎么辦?

大部分找到的結果都是使用設備像素比去操作,但實際使用起來,還是會有鋸齒。 這個問題苦惱了我很久,并且找了很久的相關資料,總算是功夫不負有心人,讓我找到了解決方案,在github里有大神已經提供了解決方案,可以點擊這里,大神在源碼的基礎上增加兩個配置項,scale和dpi,推薦使用scale參數。

源碼位置:https://github.com/eKoopmans/html2canvas/tree/develop/dist

let imgHeight = window.document.querySelector('.content').offsetHeight // 獲取DOM高度let imgWidth = window.document.querySelector('.content').offsetWidth // 獲取DOM寬度let scale = window.devicePixelRatio // 獲取設備像素比html2canvas(window.document.querySelector('.content'), {useCORS: true,scale: scale,width: imgWidth,height: imgHeight}).then((canvas) => {window.document.querySelector('.content').remove()let elemImg = `<img src='${canvas.toDataURL('image/png')}' id='canvas-img' style='height: ${imgHeight}px;border-radius: 10px;width:${imgWidth}px'/>`window.document.querySelector('.container').innerHTML = elemImg}) 復制代碼

最終生成出來的圖片,是清晰并且最接近DOM的圖片

3.生成的圖片中若包含二維碼,微信長按圖片偶現無法識別?

這個問題主要出現在使用單頁面框架(如VUE)的頁面. 感謝 sundaypig提出的解決方案。 很簡單,就是不使用路由切換,使用window.location.href直接跳轉刷新頁面

location.href="www.abc.com/share/xxx" 復制代碼

PS:這個問題可以解決所有頁面中偶現二維碼無法識別的情況

4.生成的圖片中文字間距較大?

這個暫時無法完美解決,可以嘗試用css屬性:letter-spacing來設置字間距

轉載于:https://juejin.im/post/5b31d98ee51d4558817e14f8

總結

以上是生活随笔為你收集整理的html2canvas的踩坑之路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。