怎么用JavaScript實現截屏功能

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"  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>

復制代碼,運行一下,哇,帥呆了,瀏覽器上出現了超酷的兩行藝術字呢!

嗯,原來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> <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>

既然外部樣式不生效,那我們可以通過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轉換出來的圖片。

? 版權聲明
THE END
喜歡就支持一下吧
點贊7 分享