js實現截圖功能

sunnyxd 發布于2019-08-01 16:16 / 2807人閱讀

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

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

這個問題的解決方案：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);
            });
      })

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50403.html

一步一步搭建前端監控系統：如何將網頁截圖上報？

摘要：目前已經在運行的線上前端監控系統代碼和講解都放在這篇文章里監控系統介紹及代碼用戶對前端程序員來說，就是一個黑匣子。摘要：通過錄屏或者截圖，快速復現BUG場景。作者：一步一個腳印一個坑原文：搭建前端監控系統（備選）Js截圖上報篇 Fundebug經授權轉載，版權歸原作者所有。 PS：本文關于Fundebug錄屏功能的內容有些不準確的地方，比如錄屏并非通過截圖實現的，錄屏插件...

Martin91 2019-08-26 10:21 評論0 收藏0
使用html2canvas.js實現功能中遇到的一些問題

摘要：這個功能在我的瀏覽器和谷歌瀏覽器時可以實現功能的。但是發現華為自帶的瀏覽器不支持。 [1]我要實現的功能是用戶填寫完表單后，點擊提交按鈕，截圖。截圖放在一個彈層里面，給一句提示長按圖片保存至手機。 showImg(https://segmentfault.com/img/bVbtFCW?w=324&h=578); js引入的是bluebird.min.js和html2canvas.js...

Alliot 2019-08-30 11:08 評論0 收藏0
使用html2canvas.js實現功能中遇到的一些問題

摘要：這個功能在我的瀏覽器和谷歌瀏覽器時可以實現功能的。但是發現華為自帶的瀏覽器不支持。 [1]我要實現的功能是用戶填寫完表單后，點擊提交按鈕，截圖。截圖放在一個彈層里面，給一句提示長按圖片保存至手機。 showImg(https://segmentfault.com/img/bVbtFCW?w=324&h=578); js引入的是bluebird.min.js和html2canvas.js...

zhisheng 2019-08-23 18:02 評論0 收藏0
js實現截圖功能

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

mayaohua 2019-08-20 14:13 評論0 收藏0
vue項目中canvas實現截圖功能

　　在vue項目中canvas實現截圖功能是常用的，下面是具體代碼：　　實現效果：　　在vue項目中做的一個截圖功能（只能夠截取圖片），只用鼠標就可以在畫面中進行框選截取。　　實現：做一個彈窗，打開彈窗的時候傳入要截的圖，接下來在這個窗口里面，點擊截圖按鈕，開始截圖；點擊取消按鈕，取消截圖。　　窗口里面的html主要是三個部分，一個是可截圖區域，一個是截取圖片的回顯，一個是操作按鈕（截圖按鈕和取消...

3403771864 2022-09-12 18:47 評論0 收藏0