JavaScript如何實(shí)現(xiàn)截屏功能-創(chuàng)新互聯(lián)
小編給大家分享一下JavaScript如何實(shí)現(xiàn)截屏功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
最近參與了網(wǎng)易爐石盒子的相關(guān)頁面開發(fā)，在做卡組分享頁（地址：爐石盒子卡組分享），有個(gè)需求：用戶可以把這個(gè)卡組以圖片的形式分享給好友。最初的的做法是使用服務(wù)器把該頁面轉(zhuǎn)換成圖片，然后把圖片地址返回給前端。嗯，這樣也挺好的啊，而且服務(wù)器還可以對轉(zhuǎn)換出來的圖片進(jìn)行緩存，下次請求可以直接返回圖片地址了。原理上是毫無毛病的。然而，問題來了，后臺(tái)轉(zhuǎn)換的圖片和頁面內(nèi)容偶爾不一致，有時(shí)候會(huì)少了一一些內(nèi)容，PM姐姐就很不爽了，說這個(gè)問題一定要解決。反正頁面轉(zhuǎn)成圖片的接口是后臺(tái)做的，關(guān)我luan事??！就在暗暗自喜的時(shí)候，悲催的事情發(fā)生的，后臺(tái)的同事說，因?yàn)轫撁胬锩嬗行﹥?nèi)容是異步加載出來的（比如底部的二維碼是通過canvas生成的）,服務(wù)器轉(zhuǎn)換不穩(wěn)定，有時(shí)候?qū)Ξ惒戒秩镜膬?nèi)容無法截取。說白了，就是這問題他沒有辦法解決，前端去改吧，誰叫前端用了異步渲染呢？最后Leader讓我嘗試能不能直接用JS進(jìn)行截圖了，這樣既可以減輕服務(wù)器的壓力，又可以解決上面bug。
一開始，我覺得使用JS截圖的想法是非常荒謬的（怪我無知咯，前端這幾年發(fā)展的實(shí)在太快了）：首先JS沒有權(quán)限調(diào)用操作系統(tǒng)的截圖功能，其次，瀏覽器（BOM）也沒有提供相關(guān)的截圖接口。我該怎么辦呢、怎么辦呢？有事找Google啊。然后搜索了一下： JS html to png ,然后來到就找到了這里：render-html-to-an-image。開始有思路了，回答中有人提到可以把dom轉(zhuǎn)成canvas，嗯！又是Canvas！我不由得興奮起來，真的是山重水復(fù)疑無路，柳暗花明又一村??！然后再搜索一下 dom to canvas，來到了大家熟知的mdn的文檔Drawing_DOM_objects_into_a_canvas。然后就開始認(rèn)（zhuang）真(bi)的看文檔。文檔開頭就說到，不可以把dom轉(zhuǎn)成canvas，但是可以把dom轉(zhuǎn)成svg，然后再把svg畫到canvas里面去。也許有人會(huì)問，為什么要先把dom轉(zhuǎn)成svg呢？這可能是因?yàn)閟vg使用xml表示、結(jié)構(gòu)和dom一致吧。
下面就是官方文檔的step by step的教程:
1.Blob的媒體類型必須是"image/svg+xml"
2.需要一個(gè) svg 元素
3.在 svg 元素里面插入一個(gè)foreignObject元素
4.在 foreignObject 元素里面放入符合規(guī)范的 html
把dom轉(zhuǎn)成canvas就這么簡單，就上面幾個(gè)步驟。下面是文檔給出的一上簡單的demo：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="200" height="200">
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" >' +
'<em>I</em> like ' +
'<span >' +
'cheese</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
}
img.src = url;
</script>
</body>
</html>復(fù)制代碼，運(yùn)行一下，哇，帥呆了，瀏覽器上出現(xiàn)了超酷的兩行藝術(shù)字呢！
嗯，原來dom轉(zhuǎn)成canvas這么簡單??？那我通過document.body.innerHTML把body里面的所有dom取出來，然后放到 foreignObject 元素里面，不就OK了、把整個(gè)頁面都截取下來了嗎？
demo僅僅是個(gè)Hello World，但是實(shí)際項(xiàng)目中的Dom結(jié)構(gòu)比這個(gè)復(fù)雜多了，比如，引入了外部樣式表、圖片、而且還可能某些標(biāo)簽不符合xml規(guī)范（如缺少閉合標(biāo)簽等）。下面的舉個(gè)簡單的例子，.container不是使用行內(nèi)樣式的，而是在style標(biāo)簽里面定義，字體紅色，轉(zhuǎn)成圖片后，樣式不生效。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {
color: red;
}
</style>
</head>
<body>
<div class="container" >
Hello World!
</div>
<canvas id="canvas" width=200" height="200">
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" >' +
document.querySelector('.container').innerHTML +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
}
img.src = url;
</script>
</body>
</html>既然外部樣式不生效，那我們可以通過JS遍歷所有的dom元素，把全部的樣式通過element.style對象添加到行內(nèi)樣式啊。這個(gè)思路聽起來不錯(cuò)，但是，實(shí)現(xiàn)這個(gè)把外部樣式轉(zhuǎn)成行內(nèi)樣式的函數(shù)我還真寫不出來啊。需求比較緊，也沒有那 多時(shí)間去瞎折騰了，所以，就想找找有沒有現(xiàn)成的庫。于是又去google一下。很幸運(yùn)， 一下子就搜到了一個(gè)叫做html2canvas的庫，非常棒的一個(gè)庫，很強(qiáng)大、但用法非常簡單.就這么簡單的方法，就可以把我的整個(gè)頁面截圖下來了：
function convertHtml2Canvas() {
html2canvas(document.body, {
allowTaint: false,
taintTest: true
}).then(function(canvas) {
document.body.appendChild(canvas);
}).catch(function(e) {
console.error('error', e);
});
}目前還有一個(gè)問題，就是這種方法默認(rèn)是把整個(gè)頁面截取下來的（就是說，會(huì)以你的innerHeight和innerWidth為邊界，會(huì)存在大量的空白），可是，我的卡組只是占了頁面的一小部分，我只想要卡組的部分啊。其實(shí)已經(jīng)有了canvas就好辦了，我們可以對它進(jìn)行處理啊。大概思路是：1.把上面得到的canvas對象轉(zhuǎn)成Blob并放到一個(gè)img元素。然后再把img.src繪制到canvas里面。這時(shí)候調(diào)用canvas.drawImage方法就可以截取我們想要的內(nèi)容了。下面的兩個(gè)函數(shù)分別是把canvas轉(zhuǎn)成image以及反過來把image轉(zhuǎn)成canvas。
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png", 0.1);
return image;
}
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image, startX, startY, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(image, startX, startY, width, height, 0, 0, width, height);
return canvas;
}然后，再把我們上面的寫的 convertHtml2Canvas 改成下面的：
function convertHtml2Canvas() {
html2canvas(document.body, {
allowTaint: false,
taintTest: true
}).then(function(canvas) {
var img = convertCanvasToImage(canvas);
document.body.appendChild(img);
img.onload = function() {
img.onload = null;
canvas = convertImageToCanvas(img, 0, 0, 384, 696);
img.src = convertCanvasToImage(canvas).src;
$(img).css({
display: 'block',
position: 'absolute',
top: 0,
left: 400 + 'px'
});
}
}).catch(function(e) {
console.error('error', e);
});
}這時(shí)候就可以把它的頁面的某部分內(nèi)容進(jìn)行截取下來了。效果如卡組分享測試頁面。頁面左邊部分是DOM結(jié)構(gòu)的，右邊部分是則是使用html2canvas轉(zhuǎn)換出來的圖片。長得一模一樣，毫無毛病哈。
以上是“JavaScript如何實(shí)現(xiàn)截屏功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站jinyejixie.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)頁題目：JavaScript如何實(shí)現(xiàn)截屏功能-創(chuàng)新互聯(lián)
文章鏈接：http://jinyejixie.com/article6/csheig.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站制作、網(wǎng)站內(nèi)鏈、ChatGPT、搜索引擎優(yōu)化、品牌網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 云數(shù)據(jù)庫RDS存儲(chǔ)能力進(jìn)化解析！-創(chuàng)新互聯(lián)
- C#微信公眾號開發(fā)之網(wǎng)頁授權(quán)獲取用戶基本信息的示例-創(chuàng)新互聯(lián)
- 冬奧會(huì)上，流量經(jīng)濟(jì)退潮，數(shù)字經(jīng)濟(jì)當(dāng)?shù)?創(chuàng)新互聯(lián)
- 證書透明度CertificateTransparency-創(chuàng)新互聯(lián)
- 如何在Kubernetes中搭建Elasticsearch集群-創(chuàng)新互聯(lián)
- Percona-Toolkit中pt-kill用法是怎樣的呢-創(chuàng)新互聯(lián)
- {dede:field}的使用方法是什么-創(chuàng)新互聯(lián)
- ?成都網(wǎng)站建設(shè)生成真靜態(tài)有什么好處？ 2016-11-18
- 營銷型網(wǎng)站建設(shè)中什么是動(dòng)態(tài)網(wǎng)站、靜態(tài)網(wǎng)站 2013-06-07
- 靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁的區(qū)別在哪里？ 2015-10-21
- 網(wǎng)站優(yōu)化不一定需要靜態(tài)化 2016-06-23
- 什么是共享(獨(dú)享)IP、動(dòng)態(tài)(靜態(tài))IP、固定IP？ 2016-11-10
- 動(dòng)態(tài)網(wǎng)頁靜態(tài)化的優(yōu)點(diǎn) 2016-11-04
- SEO純靜態(tài)和偽靜態(tài)之間的區(qū)別與關(guān)系 2015-04-21
- 企業(yè)網(wǎng)站是選擇動(dòng)態(tài)網(wǎng)頁還是靜態(tài)網(wǎng)頁 2016-11-02
- 創(chuàng)新互聯(lián)小編為做網(wǎng)站推廣的老板們談?wù)勈裁词莻戊o態(tài)網(wǎng)站 2022-05-05
- 靜態(tài)網(wǎng)站跟動(dòng)態(tài)網(wǎng)站在制作上有哪些區(qū)別呢 2016-11-12
- 焦作網(wǎng)站建設(shè)-靜態(tài)網(wǎng)站的特點(diǎn)和優(yōu)勢 2021-09-29
- 靜態(tài)網(wǎng)頁制作的3個(gè)CMS框架 2016-08-11