js實現截圖功能

前幾天公司項目裏有這樣一個需求，把網頁的某一部分可以一鍵截圖。這個功能其實就是對人力的一個優化，若是是人爲作的話，相信你們都知道怎麼作（用截圖工具在指定區域截圖，而後保存到本地，再上傳的服務器上去）。我這個主要就解決這個批量的人力的優化。好，廢話很少說了。直接上邏輯和代碼。'

這個問題的解決方案：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轉換成canvas
     nodesToRecover.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);

            //回覆svg
            nodesToRemove.forEach(function(pair) {
                   pair.parent.removeChild(pair.child);
            });

            nodesToRecover.forEach(function(pair) {
                   pair.parent.appendChild(pair.child);
            });
      })

這個方案，我已經徹底實現了，並在咱們項目裏使用了。 歡迎你們使用，若是有什麼問題，能夠留言給我。

最後但願你們若是以爲好，給個推薦。

關注

歡迎關注小站小滑輪，小站都是平時工做中積累的一些小工具。是否是大家工做中也會遇到呢。關於小站的內容也能夠在博客下面留言哦。有什麼使用的工具想讓我補充，也能夠留言。