前言
早有耳聞這個
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.url
console.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)
})
那麼最終我在頁面中的圖檔的src
https://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
來設定字間距。
原文釋出時間為：2018年06月27日
原文作者：Anonlyyy
本文來源：
掘金如需轉載請聯系原作者