效果
代码
<!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);"><</a> <a href="javascript:void(0);">></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]; // 更换为新的背景图的 URL spots(); if (index >= 2) { index = -1 } } // 上一张 _prevPic.onclick = function () { prev_pic(); } function prev_pic() { if (index <= 0) { index = 3 } index-- _poster.src = imgList[index]; // 更换为新的背景图的 URL spots(); } //小圆点变化 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 = imgData link.click(); }); } </script> </html>
