html5 实现网页截屏 页面生成图片

效果

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="referrer" content="no-referrer" /><meta name="viewport"content="width=device-width,intial-scale=0,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,shrink-to-fit=no,viewport-fit=cover" /><title></title><script type="text/javascript" src="./html2canvas.min.js"></script><style>* {margin: 0;padding: 0;}html,body {height: 100%;width: 100%;}body {background: linear-gradient(180deg, #c4dced 0%, #d8edf4 52%, #ecf2f5 100%);position: relative;border-top: 1px solid #c4dced;box-sizing: border-box;overflow: hidden;}#poster {width: 75VW;height: 75VH;margin: 6VH auto;position: relative;background: #d2ecff;}#poster_bck {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}/* 内容 */#poster p {position: relative;text-align: center;color: #fff;font-size: 1.5vh;z-index: 6;}.headline {padding: 16vh 0 1vh 0;font-size: 1.8vh !important;font-weight: 800;}.subject {padding: 1vh 0 4vh 0;}.keynote {padding: 1vh 0 5vh 0;}.date {padding: 2vh 0 0.5vh 0;}/* 二维码 */#poster #codes {width: 15vh;height: 15vh;background-color: #ffffff;position: absolute;bottom: 14%;left: 50%;transform: translateX(-50%);z-index: 5;}/* 保存按钮 */.copmol {width: 45VW;height: 5VH;line-height: 5vh;font-size: 2vh;border: 0;border-radius: 1vw;background: #27a9df;color: #ccc;position: absolute;bottom: 5%;left: 50%;transform: translateX(-50%);}/* <!-- 轮播样式 --> */.wrapper a {width: 4vh;height: 4vh;line-height: 4vh;text-align: center;border-radius: 50%;text-decoration: none;font-size: 2vh;color: #FFF;background: #727272;position: absolute;top: 35%;}.wrapper a:nth-of-type(1) {left: 1%;}.wrapper a:nth-of-type(2) {right: 1%;}.btn {width: 25%;display: flex;justify-content: space-around;position: absolute;left: 50%;bottom: 15%;transform: translateX(-50%);}.btn span {display: block;width: 1vh;height: 1vh;background-color: white;border-radius: 50%;}.active {background-color: #27a7de !important;}</style></head><body class="wrapper"><!-- 切换 --><a href="javascript:void(0);">&lt;</a><a href="javascript:void(0);">&gt;</a><!-- 主题内容 --><div id="poster"><img id="poster_bck" crossOrigin="anonymous"><p class="headline">《小小的船》</p><p class="subject">一年级语文课文</p><p>主讲人</p><p class="keynote">张珊珊</p><p>时间</p><p class="date">2021-06-24</p><p class="time">09:30--10:30</p><!-- 二维码 --><img id="codes" crossOrigin="anonymous" alt="" srcset=""></div><!-- 小圆点 --><div class="btn"><span class="active"></span><span></span><span></span></div><button class="copmol" id="screenshotButton">保存到手机相册</button>
</body>
<script>//下一张按钮var _nextPic = document.querySelector(".wrapper a:nth-of-type(2)");// 上一张按钮var _prevPic = document.querySelector(".wrapper a:nth-of-type(1)");var _poster = document.querySelector("#poster_bck");// 选择照片文件const input = document.createElement('input');input.type = 'file';input.onchange = e => {// 读取文件const file = e.target.files[0];const reader = new FileReader();reader.onload = function () {// 将文件转换成 base64 格式const base64String = reader.result;console.log(base64String);};reader.readAsDataURL(file);};input.click();var _screenshotButton = document.querySelector("#screenshotButton");var _btn = document.querySelector(".btn");//获取所有小圆点var _spots = document.querySelectorAll(".btn span");// 下一张_nextPic.onclick = function () {next_pic();}var index = 0;//背景图片var imgList = ['https://img2.baidu.com/it/u=2611494013,594253619&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=500','https://pic.616pic.com/bg_w1180/00/16/61/QsRyZgEG6y.jpg','https://i-1-lanrentuku.52tup.com/2020/8/10/5202fa35-c436-41e5-a49a-15c976728358.jpg?imageView2/2/w/1024',];_poster.src = imgList[0]; // 设置背景图的 URL// 二维码var codes = 'https://img2.baidu.com/it/u=1602265477,1695547353&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'document.querySelector("#codes").src = codes //设置二维码function next_pic() {index++// console.log(_poster)_poster.src = imgList[index]; // 更换为新的背景图的 URLspots();if (index >= 2) {index = -1}}// 上一张_prevPic.onclick = function () {prev_pic();}function prev_pic() {if (index <= 0) {index = 3}index--_poster.src = imgList[index]; // 更换为新的背景图的 URLspots();}//小圆点变化function spots() {// console.log(index);for (var i = 0; i < _spots.length; i++) {if (i == index) {_spots[i].className = "active"} else {_spots[i].className = ""}}}//点击小圆点更新图片_btn.onclick = function (event) {//获取悬浮的小圆点var target = event.srcElement || event.target;if (target.nodeName == 'SPAN') {//查询小圆点下标var n = Array.from(_spots).findIndex(function (tag) {return tag == target})//更新下标index = n;// 更换为新的背景图的 URL_poster.src = imgList[index]//更新颜色spots();}}// 保存到手机相册_screenshotButton.onclick = function (event) {html2canvas(document.querySelector('#poster'), {useCORS: true, // 【重要】开启跨域配置scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,allowTaint: true, // 允许跨域图片}).then((canvas) => {const imgData = canvas.toDataURL('image/jpeg', 1.0);var image = new Image();image.src = imgData;// console.log(imgData)// / 创建一个链接并模拟点击下载const link = document.createElement('a');link.download = '课程海报.png';link.href = imgDatalink.click();});}</script></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/222285.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python整数常用的方法汇总与Python3 File(文件) 方法

Python整数常用的方法汇总与Python3 File(文件) 方法

Python整数常用的方法汇总 python&#xff13;基础之整数常用的方法整理 希望对大家学习或者使用python3能具有一定的参考价值。 __abs__ #返回一个数的绝对值 __add__ #两数相加 __and__ #两数按位与操作 __bool__ …
阅读更多...
11种方法判断​软件的安全可靠性​

11种方法判断​软件的安全可靠性​

软件的安全可靠性是衡量软件好坏的一个重要标准&#xff0c;安全性指与防止对程序及数据的非授权的故意或意外访问的能力有关的软件属性&#xff0c;可靠性指与在规定的一段时间和条件下&#xff0c;软件 软件的安全可靠性是衡量软件好坏的一个重要标准&#xff0c;安全性指与防…
阅读更多...
智能优化算法应用：基于蜜獾算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于蜜獾算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于蜜獾算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于蜜獾算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蜜獾算法4.实验参数设定5.算法结果6.参考文献7.MA…
阅读更多...
centos(linux)安装jenkins

centos(linux)安装jenkins

官网&#xff1a;https://pkg.jenkins.io/redhat/ jdk版本要和jenkins对上&#xff01; 安装官网进行操作&#xff1a; sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.reposudo rpm --import https://pkg.jenkins.io/redhat/jenkins.io-…
阅读更多...
华为Harmony——ArkTs语言

华为Harmony——ArkTs语言

文章目录 一、简单示例二、声明式UI描述创建组件无参有参数 配置属性配置事件配置子组件 三、自定义组件基本用法基本结构成员函数/变量 一、简单示例 我们以一个具体的示例来说明ArkTS的基本组成。如下图所示&#xff0c;当开发者点击按钮时&#xff0c;文本内容从“Hello Wo…
阅读更多...
关于“Python”的核心知识点整理大全35

关于“Python”的核心知识点整理大全35

目录 13.3.4 重构 create_fleet() game_functions.py 13.3.5 添加行 game_functions.py alien_invasion.py 13.4 让外星人群移动 13.4.1 向右移动外星人 settings.py alien.py alien_invasion.py game_functions.py 13.4.2 创建表示外星人移动方向的设置 13.4.3 检…
阅读更多...
转义字符使用详解【C语言】

转义字符使用详解【C语言】

目录 转义字符的概念 转义字符表 转义字符详解 和 实际使用示例 一、\a 二、\b 三、\f 四、\n 五、\r 六、\t 七、\v 八、\\ 九、\ 十、\" 十一、\? 十二、\0 十三、\ddd 十四、\xhh 总结—— 转义字符的概念 所有的 ASCII码都可以用“\加数字” 来表示…
阅读更多...
【C语言】动态内存管理基础知识——动态通讯录，如何实现通讯录容量的动态化

【C语言】动态内存管理基础知识——动态通讯录，如何实现通讯录容量的动态化

引言 动态内存管理的函数有&#xff1a;malloc,calloc,ralloc,free,本文讲解动态内存函数和使用&#xff0c;如何进行动态内存管理,实现通讯录联系人容量的动态化&#xff0c;对常见动态内存错误进行总结。 ✨ 猪巴戒&#xff1a;个人主页✨ 所属专栏&#xff1a;《C语言进阶》…
阅读更多...
C语言之输入输出和字符（2）

C语言之输入输出和字符（2）

目录 缓冲和重定向 ▇缓冲 ▇重定向 字符 转义字符 \和\"……字符和字符" 字符串字面量的写法 字符常量的写法 八进制转义字符和十六进制转义字符 字符编码 在看本节之前&#xff0c;请先看下上一章&#xff0c;做到更好地衔接。https://blog.csdn.net/W061…
阅读更多...
基于vue-cli快速发布vue npm 包

基于vue-cli快速发布vue npm 包

一、编写组件 1. 初始化项目并运行 vue create vue-digital-countnpm run serve2. 组件封装 新建package文件夹 ​ 因为我们可能会封装多个组件&#xff0c;所以在src下面新建一个package文件夹用来存放所有需要上传的组件。 ​ 当然&#xff0c;如果只有一个组件&#xff…
阅读更多...
【科普知识】什么是步进驱动器、驱动模式及驱动的方法？

【科普知识】什么是步进驱动器、驱动模式及驱动的方法？

我们已经知道步进电机就是一种将电脉冲信号转化为角位移的执行机构。那么如何精准地控制电机的速度和位置呢&#xff1f;这就需要一种驱动器的装置。 1.什么是步进驱动器&#xff1f; 电机控制原理图 步进驱动器是一种能使步进电机运转的功率放大器&#xff0c;能把控制器发来…
阅读更多...
Linux（二）常用命令

Linux（二）常用命令

文章目录 一、文件管理命令1.1 chmod1.2 chown1.3 cat1.4 cp1.5 find1.6 head1.7 tail1.8 less1.9 more1.10 mv1.11 rm1.12 touch1.13 vim1.14 >和>>1.15 scp1.16 ln1.17 怎么用命令查看日志 二、文档管理命令2.1 grep2.2 wc2.3 echo 三、磁盘管理命令3.1 cd3.2 df3.3…
阅读更多...
Observability：捕获 Elastic Agent 和 Elasticsearch 之间的延迟

Observability：捕获 Elastic Agent 和 Elasticsearch 之间的延迟

在现代 IT 基础设施的动态环境中&#xff0c;高效的数据收集和分析至关重要。 Elastic Agent 是 Elastic Stack 的关键组件&#xff0c;通过促进将数据无缝摄取到 Elasticsearch 中&#xff0c;在此过程中发挥着至关重要的作用。 然而&#xff0c;显着影响此过程整体有效性的关…
阅读更多...
[CVPR 2023:3D Gaussian Splatting：实时的神经场渲染]

[CVPR 2023:3D Gaussian Splatting：实时的神经场渲染]

文章目录 前言小结 原文地址&#xff1a;https://blog.csdn.net/qq_45752541/article/details/132854115 前言 mesh 和点是最常见的3D场景表示&#xff0c;因为它们是显式的&#xff0c;非常适合于快速的基于GPU/CUDA的栅格化。相比之下&#xff0c;最近的神经辐射场&#xf…
阅读更多...
基于Java+Swing实现大鱼吃小鱼小游戏(含用户登陆、注册功能)

基于Java+Swing实现大鱼吃小鱼小游戏(含用户登陆、注册功能)

基于JavaSwing实现大鱼吃小鱼小游戏 一、系统实现二、功能展示1.效果演示2.游戏界面3.游戏运行界面4.用户登陆 三、其他系统四源码下载 一、系统实现 1、创建窗口对象Ui 2、背景的绘制 3、键盘的监听事件 4、将己方鱼放上去 5、让小鱼移动 6、其他的鱼并引导&#xff08;先创建…
阅读更多...
用户管理第2节课--idea 2023.2 后端--实现基本数据库操作(操作user表) -- 自动生成

用户管理第2节课--idea 2023.2 后端--实现基本数据库操作(操作user表) -- 自动生成

一、插件 Settings... 1.1 File -- Settings 1.2 Settings -- Plugins 1.2.1 搜索框&#xff0c;也可以直接搜索 1.3 Plugins -- 【输入 & 搜索】mybatis 1.3.1 插件不同功能介绍 1.3.2 翻译如下 1.4 选中 Update&#xff0c;更新下 1.4.1 更新中 1.4.2 Restart IDE 1…
阅读更多...
前端vue keyframes动画

前端vue keyframes动画

8.1.2　keyframes动画 transition动画适合用来创建简单的过渡效果。CSS3中支持使用animation属性来配置更加复杂的动画效果。animation属性根据keyframes配置来执行基于关键帧的动画效果。新建一个名为keyframes.vue的测试文件。编写如下代码&#xff1a; <template><…
阅读更多...
连获4大奖项，欧科云链成Web3行业领跑者

连获4大奖项，欧科云链成Web3行业领跑者

2023年底&#xff0c;作为深耕区块链大数据且持续关注监管与合规科技的Web3企业&#xff0c;欧科云链连续斩获4大奖项&#xff0c;包括第十三届中国证券金紫荆奖、财联社“最具创新价值奖” 、界面新闻“优致雇主奖”与“好公司50”&#xff0c;成为中国Web3领域中最受关注的企…
阅读更多...
利用Matplotlib画简单的线形图

利用Matplotlib画简单的线形图

实验题目&#xff1a;简单的线形图 实验目的&#xff1a;利用Matplotlib画简单的线形图 实验环境&#xff1a;海豚大数据和人工智能实验室&#xff0c;使用的Python库 名称 版本 简介 numpy 1.16.0 线性代数 Pandas 0.25.0 数据分析 Matplotlib 3.1.0 数据可视化 …
阅读更多...
「工业遥测」图表控件LightningChart在水工业中的应用

「工业遥测」图表控件LightningChart在水工业中的应用

LightningChart.NET完全由GPU加速&#xff0c;并且性能经过优化&#xff0c;可用于实时显示海量数据-超过10亿个数据点。 LightningChart包括广泛的2D&#xff0c;高级3D&#xff0c;Polar&#xff0c;Smith&#xff0c;3D饼/甜甜圈&#xff0c;地理地图和GIS图表以及适用于科学…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023