本次做餓了么年度賬單項目用到了html2canvas悔橄，在使用過程中遇到了一些問題，這里自己整理一下腺毫。由于網(wǎng)上類似博文還不少癣疟，所以坑不算深，能爬出來潮酒，不方不方睛挚。
一、功能
html展示頁面急黎，再通過canvas生成圖片扎狱，調(diào)用分享接口把圖片分享出去
二、方案
html ——> canvas ——> image ——> url
- html2canvas.js：可將 htmldom 轉(zhuǎn)為 canvas 元素勃教。
- canvasAPI：toDataUrl() 可將 canvas 轉(zhuǎn)為 base64 格式
- base64轉(zhuǎn)成file淤击，通過upload接口生成url
三、踩坑開始啦
1故源、開發(fā)的時候是用 chrome 模擬器生成 canvas 后沒有發(fā)現(xiàn)有模糊的地方污抬，但是用 PC 代理手機(jī)請求開發(fā)資源時,發(fā)現(xiàn)畫面的模糊感非常明顯。
PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
通過網(wǎng)上資料的預(yù)研绳军，我定位到應(yīng)該是移動端像素密度計算的問題印机。
設(shè)備像素比 (簡稱 dpr) 定義了物理像素和設(shè)備獨(dú)立像素的對應(yīng)關(guān)系矢腻，它的值可以按如下的公式的得到：設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素
所以我們可以先獲取設(shè)備像素比，然后根據(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();
// 設(shè)定 canvas 元素屬性寬高為 DOM 節(jié)點(diǎn)寬高 * 像素比
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');
這時候再看效果，基本已看不出差別咒劲。
由于我這邊其實(shí)使用了2次html2canvas,所以按照這個方法轉(zhuǎn)換的時候顷蟆，二維碼和logo還是有點(diǎn)模糊，原因在于這兩個地方我都是使用的background腐魂，替換成img就清晰了帐偎，具體為啥，emm蛔屹。削樊。。不是很明白
2兔毒、跨域圖片繪制不出來
需求里需要獲取微信頭像漫贞，并畫到canvas畫布上，但是這樣畫布會被“污染”育叁，一旦畫布被污染迅脐，就無法讀取其數(shù)據(jù)，例如豪嗽，你不嫩再使用畫布的 toBlob(), toDataURL() 或 getImageData() 方法谴蔑，調(diào)用它們會拋出安全錯誤。
這種機(jī)制是為了避免未經(jīng)許可拉取遠(yuǎn)程網(wǎng)站信息而導(dǎo)致的用戶隱私泄露龟梦。閱讀更多
那么怎么解決呢隐锭？
1）、給 img 元素設(shè)置 crossOrigin 屬性计贰，值為 anonymous
2）钦睡、圖片服務(wù)端設(shè)置允許跨域（返回 CORS 頭）
第一步很好解決，html2canvas 本身支持配置useCORS: true
但是第二步需要服務(wù)器支持躁倒，如果圖片放在自己服務(wù)器上荞怒，讓后端改個配置就好了，但是我們這是另一種情況樱溉，圖片在微信的CDN上挣输，有人說前端做一個 node 中間層來進(jìn)行服務(wù)器轉(zhuǎn)發(fā)，感覺方案不錯福贞，但是這次我們并沒有去實(shí)現(xiàn)撩嚼，emm....遇到問題的小伙伴可以自己嘗試一下。
3、box-shadow在tocanvas時會丟失
4完丽、base64轉(zhuǎn)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的使用踩坑總結(jié)
html2canvas 圖片合成模糊問題解決
在簡書上發(fā)布相關(guān)文章是對自己不斷學(xué)習(xí)的激勵逻族；如有什么寫得不對的地方蜻底，歡迎批評指正；給我點(diǎn)贊的都是小可愛 ~_~
