怎麼用JavaScript實作截圖功能

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

2.需要一個svg 元素

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

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

把dom轉成canvas就這麼簡單，就上面幾個步驟。下面是文檔給出的一上簡單的demo：

nbsp;html>


 <meta>
 <title>Document</title>


<canvas>
</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;<div xmlns="http://www.w3.org/1999/xhtml" >&#39; +
  &#39;<em>I like &#39; +
  &#39;<span >&#39; +
  &#39;cheese&#39; +
  &#39;&#39; +
  &#39;&#39; +
  &#39;&#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>

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

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

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

nbsp;html>


 <meta>
 <title>Document</title>
 <style>
  .container {
   color: red;
  }
 </style>


<div>
 Hello World!
</div>
<canvas>
</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;<div xmlns="http://www.w3.org/1999/xhtml" >&#39; +
  document.querySelector(&#39;.container&#39;).innerHTML +
  &#39;&#39; +
  &#39;&#39; +
  &#39;&#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>

既然外部樣式不生效，那我們可以透過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('error', 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: 'block',
     position: 'absolute',
     top: 0,
     left: 400 + 'px'
    });
   }
  }).catch(function(e) {
   console.error('error', e);
  });
 }

這時候就可以把它的頁面的某部分內容進行截取下來了。效果如卡組分享測試頁面。頁面左邊部分是DOM結構的，右邊部分是則是使用html2canvas轉換的圖片。

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