├── .gitignore ├── README.md └── FullPageCaptureWithVideo.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FullPageCaptureWithVideo 2 | 3 | JS网页截图，支持Video截图 4 | 5 | ## 使用方法 6 | ```html 7 | 8 | 13 | ``` 14 | 15 | ## 示例1：全网页截图 16 | ```javascript 17 | FullPageCaptureWithVideo.capture(null, function (data) { 18 | // 新窗口打开图片 19 | window.open().document.write(""); 20 | // 当然，你也可以直接上传保存图片 21 | // Upload(data) 22 | }); 23 | ``` 24 | 25 | ## 示例2：截取某个节点/区域 26 | ```javascript 27 | FullPageCaptureWithVideo.capture({ 28 | dom: document.getElementById('video_chat_container') 29 | }, function (data) { 30 | // 新窗口打开图片 31 | window.open().document.write(""); 32 | // 当然，你也可以直接上传保存图片 33 | // Upload(data) 34 | }); 35 | ``` 36 | 37 | 38 | ## 示例3：还可以自行指定html2canvas.min.js的地址 39 | ```javascript 40 | FullPageCaptureWithVideo.capture({ 41 | // 默认: 'https://html2canvas.hertzen.com/dist/html2canvas.min.js' 42 | h2cUrl: 'your html2canvas.min.js absolute url here...' 43 | }, function (data) { 44 | // 新窗口打开图片 45 | window.open().document.write(""); 46 | // 当然，你也可以直接上传保存图片 47 | // Upload(data) 48 | }); 49 | ``` 50 | 51 | ## 示例4：加个水印也是OK的 52 | ```javascript 53 | // 设置水印 54 | FullPageCaptureWithVideo.capture({ 55 | waterMark: { 56 | text:'抓取于：' + new Date().toLocaleString(), 57 | font: "20px Arial", 58 | color: '#f00', 59 | position: { 60 | x: 20, 61 | y: 20 62 | } 63 | } 64 | }, function (data) { 65 | // 新窗口打开图片 66 | window.open().document.write(""); 67 | // 当然，你也可以直接上传保存图片 68 | // Upload(data) 69 | }); 70 | ``` -------------------------------------------------------------------------------- /FullPageCaptureWithVideo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 全网页截图，就算网页包含了视频标签，也截 3 | * 4 | * @example 5 | * 6 | * // 全网页截图 7 | * FullPageCaptureWithVideo.capture(null, function (data) { 8 | * // 新窗口打开图片 9 | * window.open().document.write(""); 10 | * // 当然，你也可以直接上传保存图片 11 | * // Upload(data) 12 | * }); 13 | * 14 | * 15 | * // 只截取指定节点 16 | * FullPageCaptureWithVideo.capture({ 17 | * dom: document.getElementById('video_chat_container'), 18 | * h2cUrl: 'your html2canvas.min.js absolute url here...' 19 | * }, function (data) { 20 | * // 新窗口打开图片 21 | * window.open().document.write(""); 22 | * // 当然，你也可以直接上传保存图片 23 | * // Upload(data) 24 | * }); 25 | * 26 | * // 设置水印 27 | * FullPageCaptureWithVideo.capture({ waterMark: { 28 | text:'抓取于：' + new Date().toLocaleString(), 29 | font: "20px Arial", 30 | color: '#f00', 31 | position: { 32 | x: 20, 33 | y: 20 34 | } } 35 | }, function (data) { 36 | // 新窗口打开图片 37 | window.open().document.write(""); 38 | // 当然，你也可以直接上传保存图片 39 | // Upload(data) 40 | }); 41 | * 42 | * 43 | * @github https://github.com/zxlie/FullPageCaptureWithVideo 44 | * @date 2018-10-24 （程序猿节） 45 | * @author zhaoxianlie (阿烈叔) 46 | */ 47 | var FullPageCaptureWithVideo = (function () { 48 | 49 | /** 50 | * 获取节点offset 51 | * @param el 52 | * @param rootEl 53 | * @returns {{top: number, left: number}} 54 | */ 55 | var getOffset = function (el, rootEl) { 56 | var top = 0, 57 | left = 0; 58 | 59 | while (el && el != rootEl && el.offsetParent) { 60 | top += el.offsetTop; 61 | left += el.offsetLeft; 62 | el = el.offsetParent 63 | } 64 | 65 | return { 66 | top: top, 67 | left: left 68 | }; 69 | }; 70 | 71 | /** 72 | * 安装 html2canvas.js 73 | * @param h2cUrl html2canvas.js的URL地址 74 | * @param resolve 75 | */ 76 | var installHtml2Canvas = function (h2cUrl,resolve) { 77 | if (typeof html2canvas === 'undefined') { 78 | console.log('即将安装 html2canvas ...'); 79 | 80 | if(!h2cUrl || !/^http(s)?:\/\/[^\s]+$/.test(h2cUrl)) { 81 | h2cUrl = 'https://html2canvas.hertzen.com/dist/html2canvas.min.js'; 82 | console.log('传入的html2canvas.js地址不合法 或 未指定 ，将采用官方地址替换'); 83 | } 84 | 85 | var script = document.createElement('script'); 86 | script.setAttribute('src', h2cUrl); 87 | document.head.appendChild(script); 88 | 89 | var intervalId = window.setInterval(function () { 90 | if (typeof html2canvas === 'function') { 91 | console.log('html2canvas安装成功！'); 92 | window.clearInterval(intervalId); 93 | resolve && resolve(); 94 | } 95 | }, 50); 96 | } else { 97 | resolve && resolve(); 98 | } 99 | }; 100 | 101 | 102 | /** 103 | * 给canvas打上水印 104 | * @param canvas 105 | * @param options 106 | * @config text 需要水印的文字 107 | * @config font 字体设置 108 | * @config color 水印颜色 109 | * @config position 位置{x,y} 110 | * @returns {*} 111 | */ 112 | var waterMark = function(canvas,options){ 113 | var ctx = canvas.getContext("2d"); 114 | 115 | ctx.font = options.font || "12px"; 116 | ctx.fillStyle = options.color || "rgba(255,0,0,0.8)"; 117 | ctx.fillText(options.text, options.position && options.position.x || 10, options.position && options.position.y || 10); 118 | 119 | return canvas; 120 | }; 121 | 122 | /** 123 | * 抓屏，有video标签都自动带上 124 | * @param options 配置参数 125 | * @config dom 需要截取的DOM节点，默认是document.body 126 | * @config h2cUrl html2canvas.js的URL地址 127 | * @config waterMark 水印 128 | * @c-config text 需要水印的文字 129 | * @c-config font 字体设置 130 | * @c-config color 水印颜色 131 | * @c-config position 位置{x,y} 132 | * @param resolve 抓图回调 133 | */ 134 | var capture = function (options, resolve) { 135 | 136 | options = options || {}; 137 | 138 | if (typeof html2canvas === 'function') { 139 | 140 | try { 141 | var dom = options.dom || document.body; 142 | html2canvas(dom || document.body, { 143 | useCORS : true, 144 | foreignObjectRendering : true, 145 | allowTaint :true, 146 | logging:false 147 | }).then(function (canvas) { 148 | console.log('屏幕截取即将开始 ...'); 149 | 150 | // 将 视频区域还原回去 151 | var context = canvas.getContext('2d'); 152 | 153 | var videos = Array.prototype.slice.call(document.getElementsByTagName('video'), 0); 154 | 155 | if (videos.length) { 156 | videos.forEach(function (video, index) { 157 | var offset = getOffset(video, dom); 158 | context.drawImage(video, offset.left, offset.top, video.offsetWidth, video.offsetHeight); 159 | 160 | if (index === videos.length - 1) { 161 | console.log('屏幕截取成功！'); 162 | if(options.waterMark) { 163 | canvas = waterMark(canvas,options.waterMark); 164 | } 165 | resolve && resolve(canvas.toDataURL('image/png')); 166 | } 167 | }); 168 | } else { 169 | console.log('屏幕截取成功！'); 170 | if(options.waterMark) { 171 | canvas = waterMark(canvas,options.waterMark); 172 | } 173 | resolve && resolve(canvas.toDataURL('image/png')); 174 | } 175 | 176 | }); 177 | } catch (e) { 178 | console.log('sth happened : ', e) 179 | } 180 | } else { 181 | installHtml2Canvas(options.h2cUrl,function () { 182 | capture(options, resolve); 183 | }); 184 | } 185 | }; 186 | 187 | return { 188 | capture: capture 189 | } 190 | 191 | })(); 192 | --------------------------------------------------------------------------------