前幾天公司項目里有這樣一個需求，把網頁的某一部分能夠一鍵截圖。這個功能其實就是對人力的一個優化，如果是人為做的話，相信大家都知道怎么做（用截圖工具在指定區域截圖，然后保存到本地，再上傳的服務器上去）。我這個主要就解決這個批量的人力的優化。好，廢話不多說了。直接上邏輯和代碼。'

這個問題的解決方案：html to canvas to png.
目前有一個這樣的插件: html2canvas,

html2canvas($targetElem, {useCORS: true,onrendered: function(canvas) {}});

這個'$targetElem'就是那個要轉換的html， useCORS 用來設置圖片是否跨域（如html圖片域名和當前網站不是同一個域名，需要設置這個屬性）， onrendered 是轉換完成后執行的方法。

里面有一種情況需要考慮：如果html標簽里有svg標簽， 目前htm2canvas不支持svg標簽。
這個情況下就需要先把svg處理成html2canvas能處理標簽。
我這策略是 svg 轉換成 canvas ，html2canvas 轉換完成，再回復svg。這里我還需要這個插件canvg（svg轉canvas）
具體代碼如下

var nodesToRecover = [];var nodesToRemove = [];var $svgElem = $targetElem.find('svg');$svgElem.each(function(index, node) {var parentNode = node.parentNode;var canvas = document.createElement('canvas');canvg(canvas, parentNode, {ignoreMouse: true, ignoreAnimation: true});//將svg轉換成canvasnodesToRecover.push({parent: parentNode,child: node});parentNode.removeChild(node);nodesToRemove.push({parent: parentNode,child: canvas});parentNode.appendChild(canvas);});html2canvas($targetElem, {useCORS: true,onrendered: function(canvas) {var base64Image = canvas.toDataURL('image/png').substring(22);//回復svgnodesToRemove.forEach(function(pair) {pair.parent.removeChild(pair.child);});nodesToRecover.forEach(function(pair) {pair.parent.appendChild(pair.child);});})

這個方案，我已經完全實現了，并在我們項目里使用了。 歡迎大家使用，如果有什么問題，可以留言給我。

最后希望大家如果覺得好，給個推薦。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的js实现截图功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。