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

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

目前還有一個問題，就是這種方法默認(rèn)是把整個頁面截取下來的（就是說，會以你的innerHeight和innerWidth為邊界，會存在大量的空白），可是，我的卡組只是占了頁面的一小部分，我只想要卡組的部分啊。其實(shí)已經(jīng)有了canvas就好辦了，我們可以對它進(jìn)行處理啊。大概思路是：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)容進(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)行業(yè)資訊頻道！