H5页面长按截图+保存页面截图到本地功能
2024-05-21 18:34:59
利用的是html2canvas插件实现该该功能
长按3秒后触发截图功能，并自动下载所截图片
一次刷新只能触发一次功能
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>文档标题</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.js"></script><script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta3/html2canvas.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.js"></script> --><!-- <script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script> --><style>body{width: 100%;height: 100vh;padding: 0;margin: 0;touch-action: none;}.biger{width: 100%;position: relative;height: 100%;/*background: url("../../assets/others/cxbg.png") no-repeat;*/background-size: cover;z-index: -1;overflow: hidden;}.logos{position: absolute;left: 0;top: 40px;z-index: 7;}.centerBox{top: 0;left: 0;bottom: 0;right: 0;margin: auto;z-index: 7;position: absolute;/*background: url("../../assets/others/1.png") no-repeat;*//*background-size: cover;*/width: 100%;height: 100%;overflow: hidden;display: flex;justify-content: center;align-items: center;}.bgImgs{width: 823px;height: 1187px;position: relative;transform: scale(1.30)}.header{height: 140px;width: 140px;background: #fff;border-radius: 50%;overflow: hidden;}.header>img{width: 140px;height: 140px;}.headers{width: 100%;position: absolute;top: 41px;display: flex;justify-content: center;}.bird{position: absolute;top: 20px;right: 84px;}.textBox{width: 100%;text-align: center;position: absolute;top: 213px;}.names{font-size: 30px;color: #000;}.ranking{margin-top: 10px;font-size: 42px;color: #5f9567;}.circle{position: absolute;top: 500px;right: 104px;z-index: 8;transform: scale(1.3);}.section{position: absolute;top: 640px;right: 115px;z-index: 8;}.hintText{position: absolute;z-index: 9;top: 520px;/*right: 115px;*/font-size: 32px;color: #333;width: 100%;text-align: center;}.hintText>div{width: 100%;text-align: center;margin-top: 10px;}.bottomImgs{position: absolute;bottom: 49px;z-index: 9;width: 100%;height:auto;display: flex;justify-content: center;left: 36px;}#content{width: 100%;height: 100%;}</style>
</head>
<body>
<div id="content"><div class="biger"><img src="../assets/others/logo.png" alt="" class="logos"><div class="centerBox"><div class="bgImgs"><img src="../assets/others/1.png" alt=""><div class="headers"><div class="header"><img src="../assets/others/water.png" alt=""></div></div><img src="../assets/others/bird.png" class="bird" alt=""><div class="textBox"><div class="names">抱团取暖</div><div class="ranking">我是成都市第1位</div></div><img src="../assets/others/section.png" alt="" class="section"><div class="hintText"><div>我承诺坚持低碳出行，</div><div>选择共享服务，</div><div>让城市活力“蓉”光焕发！</div></div></div></div><img src="../assets/others/carcle.png" alt="" class="circle"><div class="bottomImgs"><img class="showImg" alt="" style="transform: scale(1.4)"></div></div>
</div>
<script>var numbers = Math.floor(Math.random()*7); //随机数设置背景样式var bodys = document.getElementsByTagName('body')[0];
tion jietu(event){ //截图功能event.preventDefault(); //组织默认var userAgent = navigator.userAgent; //判断打开来源var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;html2canvas($('#content'), {allowTaint: true,taintTest: false,useCORS:true,//火狐浏览器添加项onrendered: function (canvas) {var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");var userAgent = navigator.userAgent;//判断是否是IE11// debuggerif(-1 !== userAgent.indexOf("Trident")){var arr = image.split(',');var mime = arr[0].match(/:(.*?);/)[1];var bstr = atob(arr[1]);var n = bstr.length;var u8arr = new Uint8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}window.navigator.msSaveBlob(new Blob([u8arr], {type:mime}), "download.png");}else{canvas.id = "mycanvas";//生成base64图片数据var dataUrl = canvas.toDataURL();var newImg = document.createElement("img");newImg.src = dataUrl;var a = $("<a></a>").attr("href", dataUrl).attr("download", "img.png");$("body").append(a);//火狐浏览器添加项a[0].click();a.remove();}}});}var timer ;var i = 0;bodys.addEventListener('touchstart',function (e) { //监听按下timer = setInterval(function () {i++;if (i==2){jietu(e)}else if (i>2) {clearInterval(timer);}},1000);});bodys.addEventListener('touchmove',function (e) { //监听按下移动clearInterval(timer);i = 0});bodys.addEventListener('touchend',function (e) { //监听弹起clearTimeout(timer);i = 0})
</script>
</body>
</html>H5页面长按截图+保存页面截图到本地功能相关推荐
- 微信长按网页保存为截图
本文是我处理问题时看到的一篇博客,感觉很详细,所以保存了, 原文地址 H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界 ...
- H5 -- （功能）基于html2canvas实现长按网页保存为图片到本地
1.需求:长按页面中的一部分(里面有动态获取的用户昵称.头像及动态生成的二维码),弹出下载框,点击后将这部分保存为图片下载到手机里(如图) 2.分析:由于有动态获取数据,需等DOM元素生成之后,再将这 ...
- QT编写实现图片的幻灯片播放、自适应显示、缩放（以鼠标位置为中心进行缩放）、拖动、重置、显示鼠标位置像素坐标及RGB值、播放GIF动画、截图保存、批量保存、拖入文件夹遍历所有文件
这个图片查看器功能很多,是我花了不少心思,不断优化,不断添加功能的成果: 1.能打开并显示所有常用图片格式文件,显示鼠标位置像素坐标及RGB值 2.能缩放,拖动图片,可以以鼠标为中心滚动滚轮进行缩放 ...
- 页面置换算法先进先出java_页面替换算法（FCFS，LRU,OPT三种）
import java.util.Scanner; import java.util.Arrays; import java.util.LinkedList; class PageReplacemen ...
- 小程序 超长页面截图保存web-view+html2canvas
web-view文档建议参考----支付宝提供的文档,html2canvas官方文档(官网可以下载html2canvas.js 和 html2canvas.min.js).由于篇幅受限,这里就贴了一下 ...
- 【Flutter 问题系列第 22 篇】在 Flutter 中如何截取屏幕并显示到页面中，以及如何将截图保存到相册
这是[Flutter 问题系列第 22 篇],如果觉得有用的话,欢迎关注专栏. 关于在 Flutter 中如何截取屏幕,以及如何将截图保存到相册的文章少之又少,即使有,也是错误一大片,有的甚至运行后都 ...
- 小程序跳转H5实现长截图功能；vue-cli3通过rem适配
一.需求: 微信小程序部分页面需要一键长图的功能. 通过html2canvas插件可以实现,具体可参考微信小程序实现一键长图并保存图片到相册.由于该插件只能在H5项目中使用,则需要截图的小程序 ...
- 苹果端手机微信页面长按图片无法保存的解决方案
苹果端手机微信页面长按图片无法保存的解决方案 参考文章: (1)苹果端手机微信页面长按图片无法保存的解决方案 (2)http://www.cnblogs.com/xiaofengju/p/580748 ...
- H5页面保存base64图片到本地
保存base64图片到本地 H5页面与APP端.小程序端有所不同,其没有操作本地文件的权限,因此保存图片功能需要"下载"来支持. 一般我们通过canvas等功能生成的图片都是bas ...
最新文章
- 网络模型：（0）背景
- 从前端框架到前端架构参考资料
- 【控制】《鲁棒控制-线性矩阵不等式处理方法》-俞立老师-第9章-时滞系统的分析和综合
- qq应用之超级店长数据分析
- 1.svn无法连接，2.svn日志无法显示，3.日志无法修改
- 隐藏GridControl的“Drag a column header here to group by that column”
- 别求面经了！小夕手把手教你如何斩下和选择NLP算法岗offer！（19.11.21更新）
- linux中如何改IP
- DTCC 2020 PDF（共77个）丨2020中国数据库技术大会文档分享
- PHP 7 的五大新特性
- 解决 eclipse 生成 javadoc 中文乱码的问题
- 局域网下搭建项目管理服务器,如何低成本快速搭建局域网地图服务器
- 【Knowledge Graph】C3KG: A Chinese Commonsense Conversation Knowledge Graph
- 非功能性需求都包括哪些方面?
- matlab中asc格式,matlab将图片转换成asc码txt文本格式 | 学步园
- Manjaro 系统日常使用入门导引
- JS中会改变原数组和原字符串的API方法总结
- 零经验的创业者，如何在本地构建自己的外卖跑腿平台？
- 酒吧管理系统（大一c语言课程设计）
- deflategzip区别