JS页面截图

article/2025/7/21 10:01:20

1、引入 js 【密码:gf33】
点击下载 html2canvas.min.js

<script src="{url:@static/octzz/js/html2canvas.min.js}"></script>

2、html代码

<body><div><button type="button" class="layui-btn" onclick="createImg();">截图</button></div><div id="imgDiv" style="z-index: -1;"><fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>表格</legend></fieldset><div class="layui-form"><table class="layui-table"><colgroup><col width="150"><col width="150"><col width="200"><col></colgroup><thead><tr><th>人物</th><th>民族</th><th>出场时间</th><th>格言</th></tr></thead><tbody><tr><td>贤心</td><td>汉族</td><td>1989-10-14</td><td>人生似修行</td></tr></tbody></table></div></div>
</body>

3、js代码

<script>var dataURIToBlob = function (imgName, dataURI, callback) {var binStr = atob(dataURI.split(',')[1]),len = binStr.length,arr = new Uint8Array(len);for (var i = 0; i < len; i++) {arr[i] = binStr.charCodeAt(i);}callback(imgName, new Blob([arr]));}var callback = function (imgName, blob) {var triggerDownload = $("<a>").attr("href", URL.createObjectURL(blob)).attr("download", imgName).appendTo("body").on("click", function () {if (navigator.msSaveBlob) {return navigator.msSaveBlob(blob, imgName);}});triggerDownload[0].click();triggerDownload.remove();};/*使用的话只需看这段代码*/function createImg() {// 步骤一: 设置生成图片的名字var imgName = "20220101.png";// 步骤二: 选择需要截取的dom, 可以更具需求修改选择器var shareContent = document.getElementById('imgDiv');// 克隆一下需要截取的dom(这个操作必须有, 不然的话页面以外看不到的内容会截取不到)var copyDom = shareContent.cloneNode(true);copyDom.style.width = shareContent.scrollWidth + "px";copyDom.style.height = shareContent.scrollHeight + "px";document.querySelector("body").appendChild(copyDom);// 步骤三: 调用html2canvas 截图html2canvas(copyDom).then(function (canvas) {const context = canvas.getContext("2d");context.imageSmoothingEnabled = false;context.webkitImageSmoothingEnabled = false;context.msImageSmoothingEnabled = false;context.imageSmoothingEnabled = false;let imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");dataURIToBlob(imgName, imgUrl, callback);copyDom.remove();});}
</script>

效果
在这里插入图片描述


http://chatgpt.dhexx.cn/article/SqnG04ah.shtml

相关文章

使用html2canvas.js实现页面截图

由于最近项目需求&#xff0c;需要实现html页面截图&#xff0c;经过查资料&#xff0c;找到了这个东东html2canvas&#xff0c;刚开始截出来的图片&#xff0c;空白、模糊、图片不完整&#xff0c;各种问题&#xff0c;但幸好有各路大神的见解&#xff0c;把问题解决了&#x…

vue页面截图;H5页面截图;vue项目中将特定网页内容生成图片(截图);html2canvas截图

功能&#xff1a; 1.兼容 PC 和 Mobile&#xff1b; 2.对指定的区域进行截取&#xff1b; 3.可以控制截图大小&#xff1b; 4.截图生成base64图片地址 一、安装插件 npm install html2canvas --save 或 yarn add html2canvas二、在.vue页面引入使用 import html2canvas fro…

Java实现HTML页面截图功能

概述 业务开发中&#xff0c;经常会有HTML页面截图&#xff0c;或打印另存为PDF文件的需求。本文即是HTML页面截图需求的技术调研过程的成文。不想看长篇大论的同学&#xff0c;可以直接看Selenium部分&#xff0c;本人最后也是采取此方案。 html2canvas 直接上代码&#xf…

2种方式!带你快速实现前端截图

导语 | 本文将介绍在前端开发中页面截图的两种方式&#xff0c;包括对其实现原理和使用方式进行详细阐述&#xff0c;希望能为更多前端开发者提供一些经验和帮助。 一、 背景 页面截图功能在前端开发中&#xff0c;特别是营销场景相关的需求中, 是比较常见的。比如截屏分享&…

Element el-row el-col 布局组件详解

点此查看全部文字教程、视频教程、源代码 本文目录 1. 背景2. 分栏布局3. 分栏间隔4. 分栏偏移4. 对齐方式5. 响应式布局6. 小结 1. 背景 element的布局方式与bootstrap原理是一样的&#xff0c;将网页划分成若干行&#xff0c;然后每行等分为若干列&#xff0c;基于这样的方式…

Android基础篇 屏幕横竖屏切换(layout-land)下篇

默认情况下Activity进行屏幕旋转会自动进行onDestroy并重新onCreate 一、非默认情况下 在AndroidManifest.xml的Activity中配置 <activityandroid:name".ui.activity.XXXXXActivity"android:launchMode"singleTask"android:screenOrientation"por…

Android屏幕共享解决方案

屏幕共享是增强互动体验&#xff0c;提高沟通效率的重要功能。以下是一些实现Android屏幕共享的解决方案&#xff1a; 1、使用视频通话功能&#xff1a;在Android中&#xff0c;可以使用视频通话功能实现屏幕共享。通过视频通话&#xff0c;可以将自己的屏幕内容以视频的方式分…

让div居中的方式的几种方法

让div水平居中的方式的几种方法。 文章目录 一、margin二、绝对定位三、子元素绝对定位父元素相对定位四、flex布局总结 一、margin 第一种方式我们可以利用外边距属性来使div水平垂直居中 先来看一段有问题的代码 <!DOCTYPE html> <html lang"en"> &…

html网页图片和文字水平居中垂直居中显示

关注公众号&#xff1a;”奇叔码技术“ 回复&#xff1a;“java面试题大全”或者“java面试题” 即可免费领取资料 下面代码一致&#xff1a;示例 自己做的网站效果示例 div相对于页面水平居中显示&#xff1a; 核心代码&#xff1a;margin&#xff1a;0 auto&#xff1b;…

Android 双屏异显(Presentation) 开发,将第二个页面投屏到副屏上

1. 背景 最近开发的一个项目&#xff0c;有两个屏幕&#xff0c;需要将第二个页面投屏到副屏上&#xff0c; 这就需要用到Android的双屏异显(Presentation)技术了&#xff0c;研究了一下&#xff0c;这里做下笔记。 我们那个副屏是一块汽车的后视镜(流媒体后视镜)&#xff0c;…

父子div元素水平垂直居中的七种方法

效果样式图如下: 方法一:利用定位和transform的方法来进行居中 说明&#xff1a;首先利用定位中的子元素绝对定位和父元素相对定位的方法来,top:50% 和left:50%会使子元素在父元素中向下移动250px,向右移动250px,子元素因自身有高度和宽度,这会导致子元素不能完全居中的情况,t…

用户体验思考与flex三坑:元素不均分、溢出不省略和垂直不滚动

flex已经越来越成为前端不可避免的话题。曾经为了搞清flex的原理偶然画了一张图。但后来发现只是冰山一角。 在某些你想实现的交互效果中使用flex后可能会发现并不起作用。通过我的实践&#xff0c;大致有三个问题&#xff1a;子元素不平分父元素空间、对文字设置了溢出省略却…

DIV居中的经典方法

参考&#xff1a;https://www.cnblogs.com/rubykakas/articles/7992662.html 1. 实现DIV水平居中 设置DIV的宽高&#xff0c;使用margin设置边距0 auto&#xff0c;CSS自动算出左右边距&#xff0c;使得DIV居中。 div{width: 100px;height: 100px;margin: 0 auto; } 缺点&…

局域网屏幕共享_给安卓手机连一个大屏幕——多端协作(六)

好久不见,时下情势严峻,我们这儿封村了,生活变得更加不方便了。本来在网上买了肉,等到终于发货送到县城,我却不能进城去取了…… 希望顺丰营业点有冰箱,我的肉不会坏掉 今天给大家介绍的是Android系统的无线投屏功能,简单来说就是将支持的设备作为安卓手机的外接屏幕,以…

安卓手机与蓝牙模块联合调试(二)—— 单片机蓝牙控制LED灯亮灭(上)

系列博文&#xff1a; &#xff08;1&#xff09;安卓手机与蓝牙模块联合调试&#xff08;一&#xff09;——蓝牙模块的串口通讯 &#xff08;2&#xff09;安卓手机与蓝牙模块联合调试&#xff08;二&#xff09;—— 单片机蓝牙控制LED灯亮灭&#xff08;上&#xff09; …

android 多屏幕显示activity,副屏,无线投屏

目录 1. 首先&#xff0c;需要一个副屏 1. 1 可以通过代码的形式自己创建VirtualDispaly ,创建副屏。 1.2 或者&#xff0c;在手机的开发者模式中直接开启模拟副屏&#xff0c;也是可以的。 2.0 怎么利用这个副屏幕&#xff1f; 2.1 用作 presentation 演示ppt&#xff1…

【Android 屏幕扩展/共享】5分钟搞定—电脑 与 手机共享屏幕

回去看看老家是不是还有旧平板电脑&#xff0c;可以跨设备&#xff0c;共享屏幕哦 一些远程控制软件&#xff0c;诸如&#xff1a;TeamViewer、AnyDesk等。 但是这次我要介绍的是 一款远程显示软件&#xff0c;甚至可以理解成一款简易的KVM系统。 虽然市面上许多远程控制软件…

Android设备之间投屏功能实现

简介 简单实现两个android设备之间的投屏功能。设备间通信是通过局域网&#xff0c;需要连接同一个wifi。 录屏用到系统的MediaProjection&#xff0c;MediaProjectionManager&#xff0c;而编解码用的是MediaCodec&#xff0c;所以设备需要有DSP芯片&#xff0c;大部分手机应…

CSS实现垂直居中的5种方法

第一种 position定位margin负距离 前提是知道居中元素的宽高&#xff0c;首先给居中元素定位&#xff0c;之后设置margin的负距离为具体宽高的一半便可达到垂直居中效果 <style>.box1 {height: 300px;width: 300px;border: 10px solid pink;position: relative;}.box2 {…

在html中如何使div在页面中居中显示

在html中如何使div在页面中居中显示 最近无聊中又再温习了下html,发现好多东西都忘了。尝试着写了一个html网页&#xff0c;结果就连div如何在页面中居中显示都查了好久才弄出来。其实我不知道为什么这样可以实现&#xff0c;因为css还没仔细研究过&#xff0c;等我参加完复试定…