本次做餓了么年度賬單項目用到了html2canvas，在使用過程中遇到了一些問題，這里自己整理一下。由于網(wǎng)上類似博文還不少，所以坑不算深，能爬出來，不方不方。
一、功能
html展示頁面，再通過canvas生成圖片，調用分享接口把圖片分享出去
二、方案
html ——> canvas ——> image ——> url
- html2canvas.js：可將 htmldom 轉為 canvas 元素。
- canvasAPI：toDataUrl() 可將 canvas 轉為 base64 格式
- base64轉成file，通過upload接口生成url
三、踩坑開始啦
1、開發(fā)的時候是用 chrome 模擬器生成 canvas 后沒有發(fā)現(xiàn)有模糊的地方，但是用 PC 代理手機請求開發(fā)資源時,發(fā)現(xiàn)畫面的模糊感非常明顯。
PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
通過網(wǎng)上資料的預研，我定位到應該是移動端像素密度計算的問題。
設備像素比 (簡稱 dpr) 定義了物理像素和設備獨立像素的對應關系，它的值可以按如下的公式的得到：設備像素比 = 物理像素 / 設備獨立像素
所以我們可以先獲取設備像素比，然后根據(jù)比例創(chuàng)建尺寸更大的canvas，如二倍屏就是二倍，三倍屏就是三倍...
code如下
// first we create a deep clone node for the safty sake
let snapshotOriginal = rootNode.querySelector('.snapshot-original')
let spCloned = snapshotOriginal.cloneNode(true);
// next we reset the height to prevent person from being hide.
spCloned.querySelector('.mask').style.height = '100%'
spCloned.style.zIndex = -1
document.body.appendChild(spCloned)
// 獲取像素比
const scaleBy = DPR();
// 設定 canvas 元素屬性寬高為 DOM 節(jié)點寬高 * 像素比
const defaultCanvasOptions = {
canvas: this.canvas || (this.canvas = document.createElement('canvas')),
removeContainer: true,
allowTaint: true,
imageTimeout: 0,
async: true,
ignoreElements(element){
let id = element.id
if ( id.startsWith('slide') ) {
if ( id=== 'slide12' || id === 'loading-page') return false
else return true
}
return false
}
}
let canvas1 = await html2canvas(spCloned,
{...defaultCanvasOptions, scale: scaleBy})
document.body.removeChild(spCloned)
let img = getImage('thumbnail-img', (img)=>{
document.querySelector('#share-page .snapshot').appendChild(img);
})
img.src = canvas1.toDataURL('image/png');
這時候再看效果，基本已看不出差別。
由于我這邊其實使用了2次html2canvas,所以按照這個方法轉換的時候，二維碼和logo還是有點模糊，原因在于這兩個地方我都是使用的background，替換成img就清晰了，具體為啥，emm。。。不是很明白
2、跨域圖片繪制不出來
需求里需要獲取微信頭像，并畫到canvas畫布上，但是這樣畫布會被“污染”，一旦畫布被污染，就無法讀取其數(shù)據(jù)，例如，你不嫩再使用畫布的 toBlob(), toDataURL() 或 getImageData() 方法，調用它們會拋出安全錯誤。
這種機制是為了避免未經(jīng)許可拉取遠程網(wǎng)站信息而導致的用戶隱私泄露。閱讀更多
那么怎么解決呢？
1）、給 img 元素設置 crossOrigin 屬性，值為 anonymous
2）、圖片服務端設置允許跨域（返回 CORS 頭）
第一步很好解決，html2canvas 本身支持配置useCORS: true
但是第二步需要服務器支持，如果圖片放在自己服務器上，讓后端改個配置就好了，但是我們這是另一種情況，圖片在微信的CDN上，有人說前端做一個 node 中間層來進行服務器轉發(fā)，感覺方案不錯，但是這次我們并沒有去實現(xiàn)，emm....遇到問題的小伙伴可以自己嘗試一下。
3、box-shadow在tocanvas時會丟失
4、base64轉file，使用new FIle會有兼容性支持問題，可以使用toBlob
function dataURLtoBlob(data) {
var mimeString = data.split(',')[0].split(':')[1].split(';')[0]
var byteString = atob(data.split(',')[1])
var ab = new ArrayBuffer(byteString.length)
var ia = new Uint8Array(ab)
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
var bb = (window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder)
if (bb) {
bb = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder)()
bb.append(ab)
return bb.getBlob(mimeString)
} else {
bb = new Blob([ab], {
'type': (mimeString)
})
return bb
}
}
參考文章：
一次 H5 「保存頁面為圖片」 的踩坑之旅
html2canvas以及domtoimage的使用踩坑總結
html2canvas 圖片合成模糊問題解決
在簡書上發(fā)布相關文章是對自己不斷學習的激勵；如有什么寫得不對的地方，歡迎批評指正；給我點贊的都是小可愛 ~_~
