'頁面截屏'是前端經(jīng)常遇到的需求，比如頁面生成海報(bào)，彈窗圖片分享等，因?yàn)闉g覽器沒有原生的截圖API，所以需要借助canvas來實(shí)現(xiàn)導(dǎo)出圖片實(shí)現(xiàn)需求。

可行性方案 方案1： 將 DOM 改寫成 canvas ，調(diào)用canvas的toBlob或者toDataURL方法即刻上傳到七牛云或服務(wù)器 方案2： 使用第三方庫html2canvas.js實(shí)現(xiàn) canvas ， 在不更改頁面已有DOM的情況下優(yōu)雅生產(chǎn)canvas解決方案的選擇

方案1：需要手動(dòng)計(jì)算每個(gè)DOM元素的Computed Style，然后需要計(jì)算好元素在canvas的大小位置等屬性。

方案1難點(diǎn)

需要棄用已有的html頁面，改用canvas重寫。 頁面結(jié)構(gòu)層復(fù)雜的情況下用canvas寫，不易重構(gòu)。 有一定canvas基礎(chǔ)。

方案2：該項(xiàng)目在Github上stars已有兩萬多start，作者仍在積極維護(hù)。API非常簡(jiǎn)單，在已有項(xiàng)目中開箱即用。

html2canvas

因?yàn)槭浅Ｒ姷男枨螅陨鐓^(qū)會(huì)有成熟的解決方案，首先試試社區(qū)的解決方案。

<div style='padding: 10px; background: #f5da55'> <h4 style='color: #000; '>Hello world!</h4></div>

html2canvas(document.querySelector('#capture')).then(canvas => { document.body.appendChild(canvas)});

以上是官網(wǎng)的實(shí)例用法。在網(wǎng)頁上出現(xiàn)了一個(gè)新的 canvas DOM。接下來我們只需要把canvas轉(zhuǎn)換成圖片就好。這里使用canva原生的toDataURL和toBlob方法上次到七牛云。

使用時(shí)需要注意。此處如果生產(chǎn)的畫布中有跨域圖片，需要配置allowTaint為true。

如果是原生canvas實(shí)現(xiàn)，canvas需要所有跨域圖片請(qǐng)求完成才可繪制。有兩種解決方案

方案1：在html上寫好img標(biāo)簽，src寫好對(duì)應(yīng)的圖片url。缺點(diǎn)很明顯，會(huì)污染頁面的布局結(jié)構(gòu)。 方案2：使用js，使用new Image()的方式。設(shè)置src到對(duì)應(yīng)的圖片url，在onload回調(diào)中處理相關(guān)操作。優(yōu)點(diǎn)：可行性最高，不過有回調(diào)地獄的問題。我們用Promise改寫一下

function asyncImage(url) { const img = new Image(); img.src = url; img.setAttribute(’crossOrigin’, ’anonymous’); return new Promise((resolve, reject) => {img.onload = () => resolve(img);img.onerror = reject; });}

好的，大功告成~是不是可以交付需求了呢？開開心心提測(cè)，但是在移動(dòng)端測(cè)試的時(shí)候發(fā)現(xiàn)生產(chǎn)的圖片非常模糊。這樣是不行的，明顯low了許多（測(cè)試不給過orz）。

github有相應(yīng)的解決方案 傳送門 ，這個(gè)回答也是解決很多人的問題

基本原理：將canvas寬高放大兩倍。把css把canvas的style設(shè)置成1倍大小。

var shareContent = YourTargetElem; var width = shareContent.offsetWidth; var height = shareContent.offsetHeight; var canvas = document.createElement('canvas'); var scale = 2 || window.devicePixelRatio ; //也可以使用設(shè)備像素比 canvas.width = width * scale; canvas.height = height * scale; canvas.getContext('2d').scale(scale, scale); var opts = {scale: scale, canvas: canvas, logging: true, width: width, height: height }; html2canvas(shareContent, opts).then(function (canvas) {var context = canvas.getContext(’2d’);var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);document.body.appendChild(img);$(img).css({ 'width': canvas.width / 2 + 'px', 'height': canvas.height / 2 + 'px',}) });

原理我們已經(jīng)知道了，實(shí)際操作之后圖像也確實(shí)清晰了很多。但是問題還是沒有解決掉。

縮小雖然提高了清晰度，但是我們需要的圖片是原始比例的大小。。

最終多次嘗試無果后，選擇放棄使用框架。直接用原生canvas擼一個(gè)！

canvas繪制

我們知道，在高清屏的設(shè)備下，任何繪制canvas中的圖像、文字、線條、形狀都可能會(huì)出現(xiàn)模糊的問題。可通過引入 GitHub 中的 hidpi-canvas 有效地解決。

首先去 GitHub 下載 hidpi-canvas.js 文件：傳送門； 在項(xiàng)目中引入 hidpi-canvas.js 文件; 調(diào)用 getPixelRatio() 函數(shù)，得到 ratio 值； 在 drawImage() 中，將 width 和 height 乘以 ratio； 最終的canvas導(dǎo)出為Blog，轉(zhuǎn)換成文件對(duì)象上傳七牛云。

核心代碼如下

function asyncImage(url) {const img = new Image();img.src = url;img.setAttribute(’crossOrigin’, ’anonymous’);return new Promise((resolve, reject) => { img.onload = () => resolve(img); img.onerror = reject;}); } async function drawCanvas(){var canvas = document.querySelector(’canvas’);var context = canvas.getContext(’2d’);var ratio = getPixelRatio(context); // 關(guān)鍵代碼canvas.width = 300 * ratio; // 畫布寬度canvas.height = 300 * ratio; // 畫布高度var divWidth = 300 * ratio; // 用于內(nèi)容居中var divHeight = 300 * ratio; // 用于內(nèi)容居中const image = await asyncImage(’picUrl’)const imgWidth = 550const imgHeight = 300context.drawImage(this, 50, 50, imgWidth * ratio, imgHeight * ratio)// Some other codeconst Blob = canvas.toBlob((Blob)=>{ //上傳七牛云}); }

最終生成的圖片終于清晰了...只需要根據(jù)dom的offsetWidth等適配不同屏幕就可以了。

總結(jié)

如果對(duì)圖片的清晰度要求不高，或者圖片需求是生成縮略圖的情況下。采用 html2canvas 是非常不錯(cuò)的選擇。否則，還是用canvas繪制出的圖片更清晰。

到此這篇關(guān)于JS如何實(shí)現(xiàn)頁面截屏功能的文章就介紹到這了,更多相關(guān)JS頁面截屏功能內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！