[[353862]]

 前言

網(wǎng)頁(yè)截圖功能目前也是非常常見的需求, 尤其是在在線教育領(lǐng)域. 我們朋友圈的微信海報(bào), 活動(dòng)海報(bào)等, 一般都是運(yùn)營(yíng)/市場(chǎng)人員通過設(shè)計(jì)工具設(shè)計(jì)而成, 但是如何更好的映射到自己的服務(wù)體系里面, 比如H5頁(yè)面中, 植入更多信息收集, 交互能力. 這一塊的應(yīng)用探索, 頁(yè)面截圖是一個(gè)非常好的解決方案.

接下來筆者就來復(fù)盤一下如何基于網(wǎng)頁(yè), 一鍵生成頁(yè)面海報(bào)的功能, 并將此能力, 集成到筆者的開源項(xiàng)目H5-Dooring中為編輯器賦能.

正文

在實(shí)現(xiàn)具體功能之前, 我們先看看具體的實(shí)現(xiàn)效果:

從演示中我們可以看出, 我們最終目標(biāo)是實(shí)現(xiàn)在PC端生成H5頁(yè)面的截圖, 所以可能會(huì)涉及到以下幾個(gè)問題:

• 如何實(shí)現(xiàn)將頁(yè)面轉(zhuǎn)化為圖片
• 如何實(shí)現(xiàn)H5效果模擬并截取實(shí)際的H5頁(yè)面

我們可以先來想想實(shí)現(xiàn)思路, 如何能基于dom轉(zhuǎn)化為圖片? 這塊技術(shù)也是老生常談的課題了, 我們都知道可以用canvas來實(shí)現(xiàn), 大致流程如下: 

我們?nèi)绻迷膶?shí)現(xiàn)方案, 大致要經(jīng)歷以上幾個(gè)步驟, 其中第二步是關(guān)鍵環(huán)節(jié)也是最復(fù)雜的一步, 我們需要手動(dòng)實(shí)現(xiàn)dom到canvas的映射, 最后轉(zhuǎn)化為標(biāo)準(zhǔn)的canvas繪圖對(duì)象. 當(dāng)然現(xiàn)成也有很多庫(kù)可以直接幫我們簡(jiǎn)化這一步驟, 比如html2canvas, dom-to-image. 接下來我們就來解決第一個(gè)問題.

如何實(shí)現(xiàn)將頁(yè)面轉(zhuǎn)化為圖片

在親自調(diào)研了html2canvas庫(kù)并使用的過程中, 筆者發(fā)現(xiàn)了很多問題, 比如如果樣式中出現(xiàn)%單位, 或者有一些圖片背景的問題, 導(dǎo)致html2canvas并沒有很好的work, 而且渲染還原度和清晰度都有問題, 所以筆者暫時(shí)沒有深入研究(不過這些問題可以通過修改庫(kù)本身解決), 后面筆者直接用了dom-to-image, 發(fā)現(xiàn)使用起來很簡(jiǎn)單, 而且?guī)缀醪粫?huì)出現(xiàn)上面說的這些問題, 所以筆者果斷采用了dom-to-image, 后面看了該庫(kù)的源碼, 感覺寫的也很優(yōu)雅易懂, 后期做二次開發(fā)應(yīng)該問題不是很大. 我們可以看看其官網(wǎng)的基本使用:

// 引入 
import domtoimage from 'dom-to-image'; 
 
// 生成圖片 
domtoimage.toPng(node) 
    .then(function (dataUrl) { 
        var img = new Image(); 
        img.src = dataUrl; 
        document.body.appendChild(img); 
    }) 
    .catch(function (error) { 
        console.error('oops, something went wrong!', error); 
    }); 

用法也很簡(jiǎn)單, 而且它提供了足夠多的配置項(xiàng), 我們可以靈活配置.

第一個(gè)問題就這么解決了, 不過在使用過程中發(fā)現(xiàn)圖片模糊的問題, 這塊網(wǎng)上也有很多解決方案. 比如先放大dom, 在處理成canvas最后生成圖片的時(shí)候在縮小等, 這塊筆者就不一一舉例了.

如何實(shí)現(xiàn)H5效果模擬并截取實(shí)際的H5頁(yè)面

因?yàn)槲覀冊(cè)O(shè)計(jì)的H5頁(yè)面都在pc端完成的, 所以要想生成H5預(yù)覽圖, 無非是本地模擬尺寸, 進(jìn)行渲染, 具體方案如下:

• 采用iframe作為H5頁(yè)面容器去生成截圖
• 直接限制寬度在當(dāng)前頁(yè)面生成截圖
• 采用服務(wù)端爬蟲一鍵模擬手機(jī)訪問生成截圖

上面說的方案都可以嘗試, 第三種方案筆者之前也開源過爬蟲應(yīng)用來解決這個(gè)問題, 感興趣的可以研究了解一下, 我們很明顯會(huì)選擇第一種方案來實(shí)現(xiàn), 就如演示中的, 我們看到的彈窗中的H5其實(shí)是在iframe中渲染的:

實(shí)現(xiàn)思路有了, 該問題也就很好實(shí)現(xiàn)了, 我們只需要在父頁(yè)面和iframe實(shí)現(xiàn)消息通信即可, 比如在iframe加載完成之后手動(dòng)通知iframe截取自身. 基本實(shí)現(xiàn)代碼如下:

// 編輯器頁(yè)面, 也就是父頁(yè)面 
// 定義截圖子頁(yè)面句柄函數(shù) 
window.getFaceUrl = (url) => { 
  setFaceUrl(url) 
  setShowModalIframe(false) 
} 
 
// iframe頁(yè)面, 也就是預(yù)覽頁(yè)面 
const generateImg = (cb:any) => { 
    domtoimage.toBlob(refImgDom.current,  
      { 
        width, 
        height, 
      } 
    ) 
    .then(function (blob:Blob) { 
        const formData = new FormData(); 
        formData.append('file', blob, 'tpl.jpg'); 
        req.post('/files/upload/free', formData).then((res:any) => { 
          cb && cb(res.url) 
        }) 
    }) 
    .catch(function (error:any) { 
        console.error('oops, something went wrong!', error); 
    }); 
} 
 
// 觸發(fā)父頁(yè)面的方法,將圖片傳給父頁(yè)面 
generateImg((url:string) => { 
  parent.window.getFaceUrl(url); 
})