使用html2canvas將頁面轉(zhuǎn)換成圖片的采坑記錄
"html2canvas": "^1.4.1",
"@tarojs/taro": "3.4.0-beta.0"
問題:
1. 生成的圖片很模糊
2. 生成的圖片是空白
3. 生成的圖片不完整
截圖前是這樣
截圖后這樣
截圖后的圖片圖片缺省了一部分
解決方案
問題1: 生成的圖片很模糊(圖片跨域)
方法一: 將canvas放大n倍再作圖;
移動端的話,根據(jù)移動設(shè)備的devicePixelRatio (devicePixelRatio 返回當前顯示設(shè)備的物理像素分辨率與CSS 像素分辨率之比)決定縮放比例;也可以默認放大兩倍轉(zhuǎn)換
方法二: 使用<img>來實現(xiàn)background-image的效果
只有作為background-image的背景圖會模糊，而<img>圖片標簽是沒有這個問題的。
問題2: 生成的圖片是空白(圖片跨域)
首先確定轉(zhuǎn)換后的canvas的寬高是否正確,如果不正確,就需要給html2canvas傳遞寬高參數(shù) !!!
沒有寬高問題,然后再細細排查發(fā)現(xiàn),在使用 轉(zhuǎn)換的時候圖片有跨域問題,導致轉(zhuǎn)換失敗,所以轉(zhuǎn)換成了空白圖片(大概率都是這個原因);將圖片去掉就可以正常轉(zhuǎn)換頁面的
解決方案:
方案一:
后端需要在服務(wù)器IIS上的HTTP響應(yīng)標頭設(shè)置，最簡單粗暴的方法就是全部設(shè)置成*，不過這樣安全性也低，自己可以根據(jù)自己需求設(shè)置
access-control-allow-credentials:true
Access-Control-Allow-Headers:*
access-control-allow-origin:*
方案二:
在要生成canvas的DOM中的每一個img標簽上設(shè)置 crossorigin="anonymous" 屬性,并且給資源地址加上固定的隨機數(shù)(避免緩存)
- 給html2anvas添加
useCORS:true屬性- 給要生成canvas的DOM中的每一個img標簽上設(shè)置
crossorigin="anonymous"屬性- 確保你的圖片CDN服務(wù)器支持CORS訪問，也就是會返回
Access-Control-Allow-Origin等響應(yīng)頭
在Taro中給img加上該屬性之后沒生效,因為
在taro中節(jié)點被把包裹了一層taro-image-core節(jié)點導致img屬性并沒有設(shè)置到img上(所有在taro上該方法不適用)
方案三:
使用html2canvas提供的跨域解決方案allowTaint: true 和 useCORS: true 都是解決跨域問題的方式，不同的是使用allowTaint 會對canvas造成污染，導致無法使用canvas.toDataURL 方法;所以這里就給html2canvas添加useCORS: true,試了一下還是跨域 -.-
方案四
修改html2canvas的源碼(最終解決方案)
核心思想也就是使用方法二,修改html2canvas源碼:
1.給
html2canvas添加useCORS: true參數(shù)
2. 設(shè)置img.crossOrigin = 'anonymous'(img.crossOrigin = ""和img.crossOrigin = 'anonymous’是等價的)
3.給資源地址添加時間戳數(shù)/一個固定的字符串,避免讀取到瀏覽器緩存數(shù)據(jù),推薦后者
設(shè)置好紅框里的內(nèi)容之后就可以成功的轉(zhuǎn)換了;也沒有跨域的錯了
由于項目限制,我的圖片是不支持CORS訪問的,所以選擇了方案四解決問題
問題3: 生成的圖片不完整
截圖不完整是因為我將該圖片進行了旋轉(zhuǎn),解決方案就是:
第一步: 給該圖片元素添加一個正方形的父元素
給足空間,保證該圖片元素在旋轉(zhuǎn)都在這個容器內(nèi)
第二步: 一般情況步驟一就可以解決問題了,但我在設(shè)置了第一步之后圖片還是不完整
經(jīng)排查發(fā)現(xiàn)子元素圖片有設(shè)置 overflow: hidden;(因為taro在img節(jié)點外包裹了一層 taro-image-core節(jié)點 小程序),需要將overflow: hidden改成 overflow: visible 問題就解決了
Taro h5代碼:文章來源：http://www.zghlxwxcb.cn/news/detail-754810.html
let node = document.querySelector('#html2canvas-dom');
html2canvas(element, {
useCORS: true,
scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
width: node?.clientWidth || canvasOption.width,
height: node?.clientHeight || canvasOption.height
}).then(canvas => {
// imgUrl 是圖片的 base64格式
const imgurl = canvas.toDataURL('image/png');
Taro.uploadFile({
url: '***',
filePath: imgurl,
name: 'file',
header: {
'X-Auth-Token': '****'
},
formData: {
method: 'POST',
fileType: 'png'
},
success: res => {
// ...
}
});
});
參考
html2canvas 采坑記錄
html2canvas跨域
html2canvas截圖如何解決跨域
dom從旋轉(zhuǎn)html2canvas截取圖片文章來源地址http://www.zghlxwxcb.cn/news/detail-754810.html
到了這里，關(guān)于使用html2canvas,將頁面轉(zhuǎn)換成圖片的圖片模糊等踩坑記錄(Web/Taro h5)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
