溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript怎么實(shí)現(xiàn)截屏功能

發(fā)布時(shí)間：2022-04-26 13:53:19 來(lái)源：億速云 閱讀：172 作者：iii 欄目：大數(shù)據(jù)

今天小編給大家分享一下JavaScript怎么實(shí)現(xiàn)截屏功能的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

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

2.需要一個(gè) svg 元素

3.在 svg 元素里面插入一個(gè) foreignObject 元素

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

把dom轉(zhuǎn)成canvas就這么簡(jiǎn)單，就上面幾個(gè)步驟。下面是文檔給出的一上簡(jiǎn)單的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ù)字呢！

嗯，原來(lái)dom轉(zhuǎn)成canvas這么簡(jiǎn)單啊？那我通過(guò) document.body.innerHTML 把body里面的所有dom取出來(lái)，然后放到 foreignObject 元素里面，不就OK了、把整個(gè)頁(yè)面都截取下來(lái)了嗎？

demo僅僅是個(gè)Hello World，但是實(shí)際項(xiàng)目中的Dom結(jié)構(gòu)比這個(gè)復(fù)雜多了，比如，引入了外部樣式表、圖片、而且還可能某些標(biāo)簽不符合x(chóng)ml規(guī)范（如缺少閉合標(biāo)簽等）。下面的舉個(gè)簡(jiǎn)單的例子，.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>

既然外部樣式不生效，那我們可以通過(guò)JS遍歷所有的dom元素，把全部的樣式通過(guò)element.style對(duì)象添加到行內(nèi)樣式啊。這個(gè)思路聽(tīng)起來(lái)不錯(cuò)，但是，實(shí)現(xiàn)這個(gè)把外部樣式轉(zhuǎn)成行內(nèi)樣式的函數(shù)我還真寫(xiě)不出來(lái)啊。需求比較緊，也沒(méi)有那 多時(shí)間去瞎折騰了，所以，就想找找有沒(méi)有現(xiàn)成的庫(kù)。于是又去google一下。很幸運(yùn)， 一下子就搜到了一個(gè)叫做html2canvas的庫(kù)，非常棒的一個(gè)庫(kù)，很強(qiáng)大、但用法非常簡(jiǎn)單.就這么簡(jiǎn)單的方法，就可以把我的整個(gè)頁(yè)面截圖下來(lái)了：

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

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

然后，再把我們上面的寫(xiě)的 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í)候就可以把它的頁(yè)面的某部分內(nèi)容進(jìn)行截取下來(lái)了。效果如卡組分享測(cè)試頁(yè)面。頁(yè)面左邊部分是DOM結(jié)構(gòu)的，右邊部分是則是使用html2canvas轉(zhuǎn)換出來(lái)的圖片。

以上就是“JavaScript怎么實(shí)現(xiàn)截屏功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手