前言

成都創(chuàng)新互聯(lián)公司是專業(yè)的新豐網(wǎng)站建設(shè)公司，新豐接單;提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行新豐網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

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

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

正文

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

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

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

我們可以先來想想實(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)成也有很多庫可以直接幫我們簡(jiǎn)化這一步驟, 比如html2canvas, dom-to-image. 接下來我們就來解決第一個(gè)問題.

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

在親自調(diào)研了html2canvas庫并使用的過程中, 筆者發(fā)現(xiàn)了很多問題, 比如如果樣式中出現(xiàn)%單位, 或者有一些圖片背景的問題, 導(dǎo)致html2canvas并沒有很好的work, 而且渲染還原度和清晰度都有問題, 所以筆者暫時(shí)沒有深入研究(不過這些問題可以通過修改庫本身解決), 后面筆者直接用了dom-to-image, 發(fā)現(xiàn)使用起來很簡(jiǎn)單, 而且?guī)缀醪粫?huì)出現(xiàn)上面說的這些問題, 所以筆者果斷采用了dom-to-image, 后面看了該庫的源碼, 感覺寫的也很優(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àn)槲覀冊(cè)O(shè)計(jì)的H5頁面都在pc端完成的, 所以要想生成H5預(yù)覽圖, 無非是本地模擬尺寸, 進(jìn)行渲染, 具體方案如下:

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

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

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

 
 
 
 

  
  
  
  
// 編輯器頁面, 也就是父頁面 
  
  
  
  
// 定義截圖子頁面句柄函數(shù) 
  
  
  
  
window.getFaceUrl = (url) => { 
  
  
  
  
  setFaceUrl(url) 
  
  
  
  
  setShowModalIframe(false) 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
// iframe頁面, 也就是預(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ā)父頁面的方法,將圖片傳給父頁面 
  
  
  
  
generateImg((url:string) => { 
  
  
  
  
  parent.window.getFaceUrl(url); 
  
  
  
  
}) 
 
 
 
 

網(wǎng)站名稱：前端如何實(shí)現(xiàn)一鍵截圖功能?
本文URL：http://uogjgqi.cn/article/cdshghe.html