快捷導(dǎo)航

js實(shí)現(xiàn)截圖保存圖片功能的代碼示例

更新時(shí)間：2017年02月16日 10:13:17 作者：philips

本篇文章主要介紹了js實(shí)現(xiàn)截圖功能的代碼示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

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

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

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

里面有一種情況需要考慮：如果html標(biāo)簽里有svg標(biāo)簽，目前htm2canvas不支持svg標(biāo)簽。

這個(gè)情況下就需要先把svg處理成html2canvas能處理標(biāo)簽。

我這策略是 svg 轉(zhuǎn)換成 canvas ，html2canvas 轉(zhuǎn)換完成，再回復(fù)svg。這里我還需要這個(gè)插件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);
      });
   })

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: