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轉換出來的圖片。
