快捷導(dǎo)航

JavaScript截屏功能的實現(xiàn)代碼

更新時間：2017年07月28日 08:40:48 作者：漁歌

我覺得使用JS截圖的想法是非常荒謬的，首先JS沒有權(quán)限調(diào)用操作系統(tǒng)的截圖功能，其次，瀏覽器（BOM）也沒有提供相關(guān)的截圖接口，經(jīng)過一番折騰，有點思路了，下面通過實例代碼給大家簡單介紹下js 截屏功能的實現(xiàn)代碼，一起看看吧

最近參與了網(wǎng)易爐石盒子的相關(guān)頁面開發(fā)，在做卡組分享頁（地址：爐石盒子卡組分享），有個需求：用戶可以把這個卡組以圖片的形式分享給好友。最初的的做法是使用服務(wù)器把該頁面轉(zhuǎn)換成圖片，然后把圖片地址返回給前端。嗯，這樣也挺好的啊，而且服務(wù)器還可以對轉(zhuǎn)換出來的圖片進行緩存，下次請求可以直接返回圖片地址了。原理上是毫無毛病的。然而，問題來了，后臺轉(zhuǎn)換的圖片和頁面內(nèi)容偶爾不一致，有時候會少了一一些內(nèi)容，PM姐姐就很不爽了，說這個問題一定要解決。反正頁面轉(zhuǎn)成圖片的接口是后臺做的，關(guān)我luan事??！就在暗暗自喜的時候，悲催的事情發(fā)生的，后臺的同事說，因為頁面里面有些內(nèi)容是異步加載出來的（比如底部的二維碼是通過canvas生成的）,服務(wù)器轉(zhuǎn)換不穩(wěn)定，有時候?qū)Ξ惒戒秩镜膬?nèi)容無法截取。說白了，就是這問題他沒有辦法解決，前端去改吧，誰叫前端用了異步渲染呢？最后Leader讓我嘗試能不能直接用JS進行截圖了，這樣既可以減輕服務(wù)器的壓力，又可以解決上面bug。

　　一開始，我覺得使用JS截圖的想法是非常荒謬的（怪我無知咯，前端這幾年發(fā)展的實在太快了）：首先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。然后就開始認（zhuang）真(bi)的看文檔。文檔開頭就說到，不可以把dom轉(zhuǎn)成canvas，但是可以把dom轉(zhuǎn)成svg，然后再把svg畫到canvas里面去。也許有人會問，為什么要先把dom轉(zhuǎn)成svg呢？這可能是因為svg使用xml表示、結(jié)構(gòu)和dom一致吧。
下面就是官方文檔的step by step的教程:

1.Blob的媒體類型必須是"image/svg+xml"

2.需要一個 svg 元素

3.在 svg 元素里面插入一個 foreignObject 元素

4.在 foreignObject 元素里面放入符合規(guī)范的 html

把dom轉(zhuǎn)成canvas就這么簡單，就上面幾個步驟。下面是文檔給出的一上簡單的demo：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<canvas id="canvas" style="border:2px solid black;" 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" style="font-size:40px">' +
  '<em>I</em> like ' +
  '<span style="color:white; text-shadow:0 0 2px blue;">' +
  '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ù)制代碼，運行一下，哇，帥呆了，瀏覽器上出現(xiàn)了超酷的兩行藝術(shù)字呢！

嗯，原來dom轉(zhuǎn)成canvas這么簡單?。磕俏彝ㄟ^ document.body.innerHTML 把body里面的所有dom取出來，然后放到 foreignObject 元素里面，不就OK了、把整個頁面都截取下來了嗎？

demo僅僅是個Hello World，但是實際項目中的Dom結(jié)構(gòu)比這個復(fù)雜多了，比如，引入了外部樣式表、圖片、而且還可能某些標簽不符合xml規(guī)范（如缺少閉合標簽等）。下面的舉個簡單的例子，.container不是使用行內(nèi)樣式的，而是在style標簽里面定義，字體紅色，轉(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" style="border:2px solid black;" 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" style="font-size:40px">' +
  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)樣式啊。這個思路聽起來不錯，但是，實現(xiàn)這個把外部樣式轉(zhuǎn)成行內(nèi)樣式的函數(shù)我還真寫不出來啊。需求比較緊，也沒有那多時間去瞎折騰了，所以，就想找找有沒有現(xiàn)成的庫。于是又去google一下。很幸運，一下子就搜到了一個叫做html2canvas的庫，非常棒的一個庫，很強大、但用法非常簡單.就這么簡單的方法，就可以把我的整個頁面截圖下來了：

function convertHtml2Canvas() {
  html2canvas(document.body, {
   allowTaint: false,
   taintTest: true
  }).then(function(canvas) {
   document.body.appendChild(canvas);
  }).catch(function(e) {
   console.error('error', e);
  });
 }

目前還有一個問題，就是這種方法默認是把整個頁面截取下來的（就是說，會以你的innerHeight和innerWidth為邊界，會存在大量的空白），可是，我的卡組只是占了頁面的一小部分，我只想要卡組的部分啊。其實已經(jīng)有了canvas就好辦了，我們可以對它進行處理啊。大概思路是：1.把上面得到的canvas對象轉(zhuǎn)成Blob并放到一個img元素。然后再把img.src繪制到canvas里面。這時候調(diào)用canvas.drawImage方法就可以截取我們想要的內(nèi)容了。下面的兩個函數(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);
  });
 }

這時候就可以把它的頁面的某部分內(nèi)容進行截取下來了。效果如卡組分享測試頁面。頁面左邊部分是DOM結(jié)構(gòu)的，右邊部分是則是使用html2canvas轉(zhuǎn)換出來的圖片。長得一模一樣，毫無毛病哈。

關(guān)于JS頁面截圖的就寫到這里啦，因為也只剛剛接觸，很多東西也理解得不到位，歡迎各大神指點。后面會深入學(xué)習一下html2canvas的源碼，進一步理解dom to canvas的原理。

總結(jié)

以上所述是小編給大家介紹的JavaScript截屏功能的實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: