這篇文章主要為大家展示了“web開(kāi)發(fā)中怎么實(shí)現(xiàn)一鍵截圖功能”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“web開(kāi)發(fā)中怎么實(shí)現(xiàn)一鍵截圖功能”這篇文章吧。

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、虛擬空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、浉河網(wǎng)站維護(hù)、網(wǎng)站推廣。

正文

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

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

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

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

我們可以先來(lái)想想實(shí)現(xiàn)思路, 如何能基于dom轉(zhuǎn)化為圖片? 這塊技術(shù)也是老生常談的課題了, 我們都知道可以用canvas來(lái)實(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.  接下來(lái)我們就來(lái)解決第一個(gè)問(wèn)題.

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

在親自調(diào)研了html2canvas庫(kù)并使用的過(guò)程中, 筆者發(fā)現(xiàn)了很多問(wèn)題, 比如如果樣式中出現(xiàn)%單位, 或者有一些圖片背景的問(wèn)題,  導(dǎo)致html2canvas并沒(méi)有很好的work, 而且渲染還原度和清晰度都有問(wèn)題, 所以筆者暫時(shí)沒(méi)有深入研究(不過(guò)這些問(wèn)題可以通過(guò)修改庫(kù)本身解決),  后面筆者直接用了dom-to-image, 發(fā)現(xiàn)使用起來(lái)很簡(jiǎn)單, 而且?guī)缀醪粫?huì)出現(xiàn)上面說(shuō)的這些問(wèn)題, 所以筆者果斷采用了dom-to-image,  后面看了該庫(kù)的源碼, 感覺(jué)寫(xiě)的也很優(yōu)雅易懂, 后期做二次開(kāi)發(fā)應(yīng)該問(wèn)題不是很大. 我們可以看看其官網(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è)問(wèn)題就這么解決了, 不過(guò)在使用過(guò)程中發(fā)現(xiàn)圖片模糊的問(wèn)題, 這塊網(wǎng)上也有很多解決方案. 比如先放大dom,  在處理成canvas最后生成圖片的時(shí)候在縮小等, 這塊筆者就不一一舉例了.

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

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

• 采用iframe作為H5頁(yè)面容器去生成截圖

• 直接限制寬度在當(dāng)前頁(yè)面生成截圖

• 采用服務(wù)端爬蟲(chóng)一鍵模擬手機(jī)訪(fǎng)問(wèn)生成截圖

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

實(shí)現(xiàn)思路有了, 該問(wè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); })

以上是“web開(kāi)發(fā)中怎么實(shí)現(xiàn)一鍵截圖功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！