js實現(xiàn)截圖功能

sunnyxd 發(fā)布于2019-08-01 16:16 / 2811人閱讀

摘要：前幾天公司項目里有這樣一個需求，把網(wǎng)頁的某一部分能夠一鍵截圖。這個功能其實就是對人力的一個優(yōu)化，如果是人為做的話，相信大家都知道怎么做用截圖工具在指定區(qū)域截圖，然后保存到本地，再上傳的服務(wù)器上去。

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

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

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

這個"$targetElem"就是那個要轉(zhuǎn)換的html， useCORS 用來設(shè)置圖片是否跨域（如html圖片域名和當(dāng)前網(wǎng)站不是同一個域名，需要設(shè)置這個屬性）， onrendered 是轉(zhuǎn)換完成后執(zhí)行的方法。

里面有一種情況需要考慮：如果html標(biāo)簽里有svg標(biāo)簽，目前htm2canvas不支持svg標(biāo)簽。
這個情況下就需要先把svg處理成html2canvas能處理標(biāo)簽。
我這策略是 svg 轉(zhuǎn)換成 canvas ，html2canvas 轉(zhuǎn)換完成，再回復(fù)svg。這里我還需要這個插件canvg（svg轉(zhuǎn)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轉(zhuǎn)換成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);

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

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

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

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