一段用HTML5+Javascript的截屏代码
来自:http://www.xpertdeveloper.com/2012/10/webpage-screenshot-with-html5-js/
(function (exports) { function urlsToAbsolute(nodeList) { if (!nodeList.length) { return []; } var attrName = 'href'; if (nodeList[0].__proto__ === HTMLImageElement.prototype || nodeList[0].__proto__ === HTMLScriptElement.prototype) { attrName = 'src'; } nodeList = [].map.call(nodeList, function (el, i) { var attr = el.getAttribute(attrName); if (!attr) { return; } var absURL = /^(https?|data):/i.test(attr); if (absURL) { return el; } else { return el; } }); return nodeList; } function screenshotPage() { urlsToAbsolute(document.images); urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']")); var screenshot = document.documentElement.cloneNode(true); var b = document.createElement('base'); b.href = document.location.protocol + '//' + location.host; var head = screenshot.querySelector('head'); head.insertBefore(b, head.firstChild); screenshot.style.pointerEvents = 'none'; screenshot.style.overflow = 'hidden'; screenshot.style.webkitUserSelect = 'none'; screenshot.style.mozUserSelect = 'none'; screenshot.style.msUserSelect = 'none'; screenshot.style.oUserSelect = 'none'; screenshot.style.userSelect = 'none'; screenshot.dataset.scrollX = window.scrollX; screenshot.dataset.scrollY = window.scrollY; var script = document.createElement('script'); script.textContent = '(' + addOnPageLoad_.toString() + ')();'; screenshot.querySelector('body').appendChild(script); var blob = new Blob([screenshot.outerHTML], { type: 'text/html' }); return blob; } function addOnPageLoad_() { window.addEventListener('DOMContentLoaded', function (e) { var scrollX = document.documentElement.dataset.scrollX || 0; var scrollY = document.documentElement.dataset.scrollY || 0; window.scrollTo(scrollX, scrollY); }); } function generate() { window.URL = window.URL || window.webkitURL; window.open(window.URL.createObjectURL(screenshotPage())); } exports.screenshotPage = screenshotPage; exports.generate = generate; })(window);
相关推荐
通过html5canvas实现批注功能,可以在线批注,批注完成后保存成图片,或者通过网页截图的方式保存
html5 实现网页截屏 html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能。
手机HTML5截图插件,主要是简单的截图,类似微信的头像截图。
利用html5的api实现截图的示例,实现的效果当然没有qq那么好,不过也很值得学习
html5拖拽图片调整截图代码是一款基于html5实现的拖拽图片调整大小编辑头像截图代码。
解决htmlcanvas手机无法截图或者截图不全的问题,解决后在手机或者pc上截图效果非常的好。主要解决img对象转换为base64的问题
html5头像上传拖动图片头像截图效果 html5头像上传拖动图片头像截图效果
html2canvas可以截图指定dom元素,但是dom元素中如果含有svg会导致截图不完整,例如使用jsPlumb流程图,其中连线无法截图,所以结合了canvg可以完整截图
3:修复HTML5时,部份图片的类型错误! 4: HTML5截取时,GIF统一强制转换为JPG格式! 5:加入启动前缓冲效果!规定JS加载完,主界面才显示 6: CSS文件作了微调和优化 升级 时间9月25日 晚 作者:明哥先生 请下载2.2...
截图,HTML页面截图,截图,HTML页面截图
htm2Canvas实现网页截图功能,包括demo。
js+HTML5实现视频截图的方法.docx
这个简单的应用程序将屏幕截图转换为 HTML/Tailwind CSS。它使用 GPT-4 Vision 生成代码,使用 DALL-E 3 生成外观相似的图像。 该应用程序有一个 React/Vite 前端和一个 FastAPI 后端。您将需要一个可以访问 GPT-4 ...
html2canvas实现js截图+模拟摄像头拍照,内含html2canvas.js和canvas2Image.js源码
shearphoto2.0 是HTML5头像截图插件,拍照截图,JS截图,美工切图插件,能直接压缩数码相机图片进行截图!是互联网上写得最好的一个同类型插件 ShearPhoto 完美支持Linux Windows 服务器,国外空间等完美通过。 兼容...
通过JAVA截图的方式将HTML转换为图片格式JAVA HTML截图.rar
HTML2canvas截图
shearphoto是一个JS+PHP的HTML5截图插件,服务器压力几乎为0, 绝对强暴美图秀秀 JCROP shearphoto2.1 版本升级概况 1: 这个版本并没有新功能的加入,主要修复shearphoto2.0遗留的BUG,而且修复的BUG较多也较为...
在C#的WebBrowser控件中的HTML文件实现按钮控制C#程序。HTML按钮实现C#的截图和查看功能。
shearphoto 2.0的机制是这样的:有HTML5则使用HTML5 canvas切图,截图,JS先会截取一张最合理化的截图,然后交给后端,根据用户设置,进行压缩截图 没有HTML5的浏览器则采用先上传再截取的策略,就是原先1.5的策略...