1.Blob的媒體類型必須是"image/svg xml
"
2.需要一個svg 元素
3.在svg 元素裡面插入一個 foreignObject
元素
4.在foreignObject 元素裡面放入符合規範的html
把dom轉成canvas就這麼簡單,就上面幾個步驟。下面是文檔給出的一上簡單的demo:
Document
複製程式碼,運行一下,哇,帥呆了,瀏覽器上出現了超酷的兩行藝術字呢!
嗯,原來dom轉成canvas這麼簡單啊?那我透過 document.body.innerHTML
把body裡面的所有dom取出來,然後放到 foreignObject 元素裡面,不就OK了、把整個頁面都截取下來了嗎?
demo只是個Hello World,但是實際項目中的Dom結構比這個複雜多了,比如,引入了外部樣式表、圖片、而且還可能某些標籤不符合xml規範(如缺少閉合標籤等)。下面的舉個簡單的例子,.container不是使用行內樣式的,而是在style標籤裡面定義,字體紅色,轉成圖片後,樣式不生效。
Document Hello World!
既然外部樣式不生效,那我們可以透過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中文網其他相關文章!