公众号H5页面截屏并保存图片

直接贴代码

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="css/style.css"><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><!-- bluebird.js - 让所有浏览器都支持 ES6 Promise 对象 --><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 type="text/javascript" src="js/qrcode.js"></script><title>递易峰会</title>
</head><body class="body_wrap" id="body"><div class="content" id="content"><div class="head"><img class="icon" src="./img/ll.png" alt=""><span class="title">请选择您的身份</span><img class="icon" src="./img/ll.png" alt=""></div><!-- 身份选择 --><div class="body" id="identity"><div class="item_wrap"><div class="item item_1"><div class="item_left">递易小伙伴</div><div class="item_rgt"><img class="item_img" src="./img/women.png" alt="" srcset=""></div></div></div><div class="item_wrap"><div class="item item_2"><div class="item_left">远道而来的贵宾</div><div class="item_rgt"><img class="item_img" src="./img/man.png" alt="" srcset=""></div></div></div></div><!-- 手机信息填写 --><div class="body write_msg" id="form_msg"><div class="form"><div class="form_item"><div class="lab">姓名</div><input class="form_text" maxlength="11" id="userName" type="text" placeholder="请输入您的姓名"></div><div class="form_item"><div class="lab">手机号</div><input class="form_text" maxlength="11" id="userPhone" type="text" placeholder="输入您的手机号"><button class="button" id="codebutton">发送验证码</button></div><div class="form_item"><div class="lab">验证码</div><input class="form_text" id="code" maxlength="6" type="text" placeholder="输入您的验证码"></div><div class="foot_btn"><button class="submit_btn submit_2">确定并生成二维码</button><button class="submit_btn submit_1" id="submit">确定并生成二维码</button></div></div></div><!-- 生成二维码 --><div class="qrcode_wrap"><div class="qrcode_item code_img"><div id="qrcode"></div></div><div class="qrcode_item"><p class="p1">请将二维码平放在高拍仪上进行扫描</p><p class="p2">请您长按二维码生成整图再进行保存~~~</p></div><div class="qrcode_item item_logo"><img class="logo_img" src="./img/logo.png" alt="" srcset=""></div></div><!-- 提示弹框 --><div class="tips"><div class="tips_title"></div></div></div><div id="screen_img"><div class="img_title">请长按下图进行保存</div><!-- <img id="close" src="img/close1.png" alt="" srcset=""> --></div><script src="js/index.js"></script><script>$('#screen_img').hide()$(".code_img").on({ touchstart: function(e) { console.log('触摸开始', e)// 长按事件触发  timeOutEvent = setTimeout(function() {  timeOutEvent = 0screenShot()}, 500)},  touchmove: function(e) {  // console.log('触摸移动', e)clearTimeout(timeOutEvent);  timeOutEvent = 0;  },  touchend: function(e) {// console.log('触摸结束', e)clearTimeout(timeOutEvent);  if (timeOutEvent != 0) {  // 点击事件   }  return false;}  })// 截屏function screenShot() {let shareContent = document.getElementById("body")html2canvas(shareContent, {allowTaint: true,taintTest: false,useCORS: true,      // 火狐浏览器添加项onrendered: canvas => {$('#close').show()let img = new Imagelet html = '<img id="close" src="img/close1.png" alt="" srcset="">'img.src = canvas.toDataURL('image/png')$('#screen_img').append(img)$('#screen_img').append(html)$('#screen_img img').addClass('screenImg')$('#screen_img').slideDown()// 点击关闭按钮$('#close').on('click', () => {$('#screen_img').hide()$('#close').remove()$('.screenImg').remove()    // 清除图片})}})}</script>
</body>
</html>

css代码

*{margin: 0;padding: 0;font-family: PingFangSC-Medium,PingFang SC;
}
body{width: 100vw;height: 100vh;transition: .7s;user-select: none;
}
a {cursor: pointer;color: rgb(85, 26, 139);text-decoration: underline;
}
.body_wrap{background: url(../img/bg1.png) no-repeat;background-size: cover;
}
.body_qrcode{background: url(../img/bg2.png) no-repeat;background-size: cover;
}
.item_wrap{min-height: 170px;display: flex;justify-content: center;
}
.content{padding-top: 60px;position: relative;
}
.head{display: flex;align-items: center;justify-content: center;margin: 40px 0 30px;
}
.icon{width: 15px;height: 17px;
}
.title{font-size: 14px;font-weight: 600;color: rgba(255,255,255,1);padding: 0 9px;
}.item{display: flex;align-items: center;width: 295px;height: 100px;transition: .5s;
}
.item_1{background: url(../img/dy.png) no-repeat;background-size: 100%;margin-bottom: 50px;
}
.item_2{background: url(../img/v.png) no-repeat;background-size: 100%;
}
.item_left{width: 50%;display: flex;justify-content: flex-start;color: #fff;font-size: 14px;padding-left: 30px;
}
.item_rgt{flex: 1;display: flex;justify-content: flex-end;padding-right: 30px;
}
.item_img{width: 50px;height: 50px;
}/* active */
.item_active1{background: url(../img/dy_active.png) no-repeat;background-size: 100%;width: 313px;height: 120px;
}
.item_active2{background: url(../img/v_active.png) no-repeat;background-size: 100%;width: 313px;height: 120px;
}
.go_left{transform: translateX(-700px);transition: 1.2s;
}/* 手机信息填写 */
.write_msg{background: #fff;border-radius: 10px;width: calc(100% - 60px);max-width: 315px;margin: auto;position: relative;box-shadow: 0 0 10px #1d1668;display: none;
}
.little_form{width: calc(100% - 30px);
}
.form{padding: 15px;
}
.form_item{height: 50px;display: flex;align-items: center;border-bottom: 1px solid #E9E9E9;
}
.lab{color: #222222;font-size: 14px;width: 43px;padding-right: 26px;
}
.form_text{flex: 1;border: none;outline: none;width: 104px;
}
.button{font-size: 12px;width: 80px;height: 27px;border-radius: 2px;color: #888;background: #e8e8e8;outline: none;border: none;padding: 5px 0;
}
.foot_btn{margin-top: 14px;text-align: center;
}
.submit_btn{border: none;font-size: 14px;color: #888;background: #e8e8e8;width: 215px;height: 40px;outline: none;border-radius: 2px;
}
.submit_1{display: none;background: #FCD100;color: #222222;
}.color_btn{background: #FCD100;color: #222222;
}/* 生成二维码 */
.qrcode_wrap{display: none;
}
.qrcode_item{text-align: center;
}
.item_logo{margin-top: 40px;
}
.code_img{width: 160px;height: 160px;margin: auto;background: #fff;display: flex;align-items: center;justify-content: center;margin-bottom: 15px;
}
#qrcode{display: flex;justify-content: center;cursor: pointer;
}
.p1{color: #fff;font-size: 14px;font-weight: 600;text-align: center;margin-bottom: 5px;
}
.p2{color: #aaa;font-size: 12px;text-align: center;
}
.logo_img{box-shadow: 0px 4px 10px 0px rgba(255,255,255,0.05);width: 238pt;height: 43pt;
}/* 提示框 */
.tips {position: absolute;top: 15px;left: 0;right: 0;width: 90%;height: 50px;line-height: 50px;margin: auto;background: rgb(46, 44, 143);text-align: center;border-radius: 6px;color: #fff;font-size: 14px;display: none;
}
.snow{font-size: 12px;
}/* 音乐 */
#audio{position: absolute;bottom: 0;width: 100%;display: none;
}/* 截屏 */
#close{position: absolute;bottom: 70px;width: 30px;height: 30px;margin: auto;left: 0;right: 0;
}
.screenImg{width: 60%;border-radius: 10px;
}
#screen_img{height: 100%;display: flex;flex-flow: column;align-items: center;justify-content: center;background: rgba(0,0,0,0.9);position: fixed;top: 0;left: 0;width: 100%;z-index: 9999;
}
.img_title {color: #fff;font-size: 20px;padding: 20px;
}

js代码

$(() => {let width = $(window).width()let height = $(window).height()if(width <= 320) {$('.write_msg').addClass('little_form')}// 选择身份$('.item_1').click(() => {if($('.item_1').hasClass('item_active1')) {$('.item_1').removeClass('item_active1')$('.item_2').removeClass('item_active2')} else {$('.item_1').addClass('item_active1')$('.item_2').removeClass('item_active2')}setTimeout(() => {$('#identity').addClass('go_left')$('.title').html('请输入您的手机号')setTimeout(()=> {$('#identity').hide()$('#form_msg').slideDown()}, 300)}, 1000)})$('.item_2').click(() => {if($('.item_2').hasClass('item_active2')) {$('.item_1').removeClass('item_active1')$('.item_2').removeClass('item_active2')} else {$('.item_1').removeClass('item_active1')$('.item_2').addClass('item_active2')}setTimeout(() => {$('#identity').addClass('go_left')$('.title').html('请输入您的手机号')setTimeout(()=> {$('#identity').hide()$('#form_msg').slideDown()}, 300)}, 1000)})// 信息填写// 姓名输入$('#userName').bind('input propertychange', () => {checkWrite()})// 手机号输入let regMobile = /^[1]([3-9])[0-9]{9}$/$('#userPhone').bind('input propertychange', () => {$('#userPhone').val($('#userPhone').val().replace( /[^\d]/g,''))if($('#userPhone').val().length > 1 && $('#userPhone').val().split('')[0] != 1) {$('#userPhone').val('')tips('请输入正确的手机号')}if($('#userPhone').val().length >= 11 && regMobile.test($('#userPhone').val())) {$('#codebutton').addClass('color_btn')}checkWrite()})// 验证码输入$('#code').bind('input propertychange', () => {$('#code').val($('#code').val().replace( /[^\d]/g,''))checkWrite()})// 点击按钮获取验证码let timer       // 定时器let clock = 59  // 倒计时$('#codebutton').bind('click', () => {if(!$('#userName').val()) {$('#userName').focus()$('.tips').hide()tips('请输入姓名')} else if(!$('#userPhone').val()) {tips('请输入您的手机号')} else if($('#userPhone').val().length < 11 || !regMobile.test($('#userPhone').val())) {tips('请输入正确的手机号')} else {if(clock >= 59) {$('#codebutton').removeClass('color_btn')timer = setInterval(() => {if(clock == 0) {clock = 59clearInterval(timer)$('#codebutton').html('发送验证码')$('#codebutton').addClass('color_btn')} else {clock--$('#codebutton').html(clock + '秒')}}, 1000)}}})// 点击提交按钮$('#submit').on('click', () => {$('#body').addClass('body_qrcode').removeClass('body_wrap')$('#form_msg').hide()$('.head').hide()makeQrCode()})
})// 提示框
function tips(str) {$('.tips').hide()$('.tips_title').html(str)$('.tips').slideDown('slow')setTimeout(() => {$('.tips').fadeOut('slow')}, 3000)
}// 检查是否输入完
function checkWrite() {if($('#userName').val() && $('#userPhone').val() && $('#code').val().length >= 6) {$('.submit_2').hide()$('#submit').show()}
}function makeQrCode() {let qrcode = new QRCode(document.getElementById("qrcode"), {text: "这里是二维码内容",width: 140,height: 140,colorDark : "#000000",colorLight : "#ffffff",correctLevel : QRCode.CorrectLevel.H})$('.qrcode_wrap').slideDown()
}

效果图

公众号H5页面截屏并保存图片相关推荐

微信公众号H5页面开发--微信JS-SDK引用
微信公众号H5页面开发–微信JS-SDK引用微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时 ...
前端实现微信公众号h5页面跳转小程序-成功案例
微信公众号h5页面跳转小程序-成功案例微信公众号h5页面跳转小程序-成功案例,标题已经明确说明,h5页面可以正常跳转微信小程序官网说可以,不是我说的文章目录微信公众号h5页面跳转小程序-成功案 ...
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了 1.问题 2.原因这次可能的原因 3.过渡方案 4.解决方案 4.1 配置nginx服务器 4.2 前端打包保留两个版本 ...
微信公众号h5页面跳转小程序
微信公众号h5页面跳转小程序文章目录微信公众号h5页面跳转小程序前言一.注意二.使用步骤步骤一:绑定域名步骤二:引入环境步骤三:初始配置前言问:h5 页面可以跳转至微信小程序吗? ...
公众号h5页面跳转到小程序
前言: 最近做了一个公众号的首页,首页由一个模块需求是点击跳转到小程序,于是翻阅了资料,需要用到公众号的一个开放标签:wx-open-launch-weapp 公众号h5页面跳转小程序呢,需要先关联下 ...
微信公众号H5页面开发怎么获取用户openid
微信公众号里会嵌套h5页面然后跳转,有时候我们就需要用到用户的openid,今天就为大家介绍一下公众号h5页面怎么获取openid 首先,需要用到公众号的appid,其次需要去公众号里配置好h5页面的 ...
RTFM：腾讯微信公众号H5页面使用微信支付爬坑记
一. 微信公众号支付的流程公众号的页面会在微信环境下打开,所以默认已经有登录态.openID.AppID.AppSecret 都能拿到,申请开通商家支付之后会有 PayKey 和 mch_id (商 ...
公众号h5页面分享并监测分享事件
公众号H5中需要做分享任务,需要监听分享成功事件,实现代码 <template><div @click="toShare">111</div> ...
利用python生成微信h5_Python + Appium 微信公众号 H5 页面自动化测试
本文内容在以下环境运行成功: Windows10 Python2.7 android-sdk_r24.4.1 Appium-windows-1.15.1 chromedriver_2.40 小米手机 ...

公众号H5页面截屏并保存图片

直接贴代码

公众号H5页面截屏并保存图片相关推荐

最新文章

热门文章