搜尋

首頁  >  文章  >  web前端  >  JavaScript實作截圖功能

JavaScript實作截圖功能

巴扎黑
巴扎黑原創
2017-08-14 14:07:381939瀏覽

我覺得使用JS截圖的想法是非常荒謬的，首先JS沒有權限調用操作系統的截圖功能，其次，瀏覽器（BOM）也沒有提供相關的截圖接口，經過一番折騰，有點思路了，以下透過實例程式碼簡單介紹下js 截圖功能的實作程式碼，一起看看吧

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

　　一開始，我覺得使用JS截圖的想法是非常荒謬的（怪我無知咯，前端這幾年發展的實在太快了）：首先JS沒有權限調用操作系統的截圖功能，其次，瀏覽器（BOM）也沒有提供相關的截圖介面。我該怎麼辦呢、怎麼辦？有事找Google啊。然後搜尋了一下： JS html to png ,然後來到就找到了這裡：render-html-to-an-image。開始有想法了，回答中有人提到可以把dom轉成canvas，嗯！又是Canvas！我不禁興奮起來，真的是山重水復疑無路，柳暗花明又一村啊！然後再搜尋 dom to canvas，來到了大家熟知的mdn的文檔Drawing_DOM_objects_into_a_canvas。然後就開始認（zhuang）真(bi)的看文檔。文件開頭就說到，不可以把dom轉成canvas，但是可以把dom轉成svg，然後再把svg畫到canvas裡面去。也許有人會問，為什麼要先把dom轉成svg？這可能是因為svg使用xml表示、結構和dom一致吧。
下面就是官方文件的step by step的教學:

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

2.需要一個svg 元素

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

4.在foreignObject 元素裡面放入符合規範的html

把dom轉成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(&#39;canvas&#39;);
 var ctx = canvas.getContext(&#39;2d&#39;);
 var data = &#39;<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">&#39; +
  &#39;<foreignObject width="100%" height="100%">&#39; +
  &#39;<p xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">&#39; +
  &#39;<em>I</em> like &#39; +
  &#39;<span style="color:white; text-shadow:0 0 2px blue;">&#39; +
  &#39;cheese</span>&#39; +
  &#39;</p>&#39; +
  &#39;</foreignObject>&#39; +
  &#39;</svg>&#39;;
 var DOMURL = window.URL || window.webkitURL || window;
 var img = new Image();
 var svg = new Blob([data], {type: &#39;image/svg+xml&#39;});
 var url = DOMURL.createObjectURL(svg);
 img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
 }
 img.src = url;
</script>
</body>
</html>

複製程式碼，運行一下，哇，帥呆了，瀏覽器上出現了超酷的兩行藝術字呢！

嗯，原來dom轉成canvas這麼簡單啊？那我透過 document.body.innerHTML 把body裡面的所有dom取出來，然後放到 foreignObject 元素裡面，不就OK了、把整個頁面都截取下來了嗎？

demo只是個Hello World，但是實際項目中的Dom結構比這個複雜多了，比如，引入了外部樣式表、圖片、而且還可能某些標籤不符合xml規範（如缺少閉合標籤等）。下面的舉個簡單的例子，.container不是使用行內樣式的，而是在style標籤裡面定義，字體紅色，轉成圖片後，樣式不生效。 


<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  .container {
   color: red;
  }
 </style>
</head>
<body>
<p class="container" >
 Hello World!
</p>
<canvas id="canvas" style="border:2px solid black;" width=200" height="200">
</canvas>
<script>
 var canvas = document.getElementById(&#39;canvas&#39;);
 var ctx = canvas.getContext(&#39;2d&#39;);
 var data = &#39;<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">&#39; +
  &#39;<foreignObject width="100%" height="100%">&#39; +
  &#39;<p xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">&#39; +
  document.querySelector(&#39;.container&#39;).innerHTML +
  &#39;</p>&#39; +
  &#39;</foreignObject>&#39; +
  &#39;</svg>&#39;;
 var DOMURL = window.URL || window.webkitURL || window;
 var img = new Image();
 var svg = new Blob([data], {type: &#39;image/svg+xml&#39;});
 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物件加入行內樣式啊。這個想法聽起來不錯，但是，實現這個把外部樣式轉成行內樣式的函數我還真寫不出來啊。需求比較緊，也沒有那 多時間去瞎折騰了，所以，就想找找有沒有現成的庫。於是又去google一下。很幸運， 一下子就搜到了一個叫做html2canvas的庫，非常棒的一個庫，很強大、但用法非常簡單.就這麼簡單的方法，就可以把我的整個頁面截圖下來了：


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

目前还有一个问题，就是这种方法默认是把整个页面截取下来的（就是说，会以你的innerHeight和innerWidth为边界，会存在大量的空白），可是，我的卡组只是占了页面的一小部分，我只想要卡组的部分啊。其实已经有了canvas就好办了，我们可以对它进行处理啊。大概思路是：1.把上面得到的canvas对象转成Blob并放到一个img元素。然后再把img.src绘制到canvas里面。这时候调用canvas.drawImage方法就可以截取我们想要的内容了。下面的两个函数分别是把canvas转成image以及反过来把image转成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: &#39;block&#39;,
     position: &#39;absolute&#39;,
     top: 0,
     left: 400 + &#39;px&#39;
    });
   }
  }).catch(function(e) {
   console.error(&#39;error&#39;, e);
  });
 }

这时候就可以把它的页面的某部分内容进行截取下来了。效果如卡组分享测试页面。页面左边部分是DOM结构的，右边部分是则是使用html2canvas转换出来的图片。长得一模一样，毫无毛病哈。

关于JS页面截图的就写到这里啦，因为也只刚刚接触，很多东西也理解得不到位，欢迎各大神指点。后面会深入学习一下html2canvas的源码，进一步理解dom to canvas的原理。

以上是JavaScript實作截圖功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：利用JavaScript實現行動端左滑刪除功能介紹下一篇：利用JavaScript實現行動端左滑刪除功能介紹

相關文章

看更多