生成国庆头像纯静态HTML+JS源码
效果：https://toto.wu188.site/tx.html 要用微信打开或者扫码（更新时间：2021-09-29）
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title>国庆头像生成</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <style> html, body { padding: 0; margin: 0; height: 100%; background: linear-gradient(#ff4b3d, #ffde28) #ffde28; background-repeat: no-repeat; background-position: center; background-attachment: fixed; zoom: 1; } *{ list-style: none; } .wwww{ display: none !important; } .oooo{ display: block !important; } .fss { margin-top: 2rem; padding-bottom: 2rem; width: 100%; font-family: Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: .8rem; line-height: 1.43; letter-spacing: 0.01071em; text-align: center; color: rgba(0, 0, 0, 0.6) !important; } ul { /* width: 360px; margin: 0 auto 30px; overflow: hidden; list-style: none; padding: 0; */ display: flex; width: 360px; margin: 20px auto 20px; overflow: hidden; list-style: none; padding: 0; flex-wrap: wrap; justify-content: center; } ul li { width: 90px; float: left; padding: 12px; /* 原12 */ box-sizing: border-box; } ul li img { width: 100%; border-radius: 10%; box-shadow: 5px 5px 5px rgb(0 0 0 / 20%); } .signt{ display: none; } canvas { margin: auto; display: none; background: transparent; } .wwww{ display: none !important; } .oooo{ display: block !important; } button { margin: 0 auto 20px auto; display: block; width: 240px; height: 60px; color: #fff; background: linear-gradient(#ffe984, #ed8917) #ed8917; font-size: 22px; font-weight: bold; border-radius: 12px; border: none; outline: none; } .generateImg { width:320px; height:320px; margin: auto; border-radius: 10%; } .cus-text{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style> </head> <body> <div class="cus-text"> <ul class="uul"> <li><img src="./imgs/avatar-9.png"></li> <li><img src="./imgs/avatar-1.png"></li> <li><img src="./imgs/avatar-2.png"></li> <li><img src="./imgs/avatar-4.png"></li> <li><img src="./imgs/avatar-6.png"></li> <li><img src="./imgs/avatar-3.png"></li> <!-- <li><img src="./imgs/avatar-5.png"></li> --> <li><img src="./imgs/avatar-7.png"></li> <li><img src="./imgs/avatar-8.png"></li> </ul> <button id="button">上传图片</button> <canvas id="canvas" width="800" height="800"></canvas> <div style="width: 100%;"> <img class="image ttt" style="width: 320px; height: 320px; display: block; margin: auto; border-radius: 10%;" src="./imgs/txx.png"> <img src="./imgs/avatar-9.png" class="signt generateImg xxx"> </div> <input type="file" accept="image/*" hidden> </div> <p class="fss"><a style="color: rgba(0, 0, 0, 0.6);text-decoration: none;" class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-lf7ukq-MuiTypography-root-MuiLink-root" href="https://www.cnblogs.com/Awchao/">@</a><a style="color: rgba(0, 0, 0, 0.6);text-decoration: none;" class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-lf7ukq-MuiTypography-root-MuiLink-root" href="https://www.cnblogs.com/Awchao/">一起成长(长按保存图片)</a></p> <script> if (/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)==false){ window.location.href = "https://www.cnblogs.com/Awchao/"; } document.onkeydown = function () { if (window.event && window.event.keyCode == 123) { alert("F12被禁用"); event.keyCode = 0; event.returnValue = false; } if (window.event && window.event.keyCode == 13) { window.event.keyCode = 505; } if (window.event && window.event.keyCode == 8) { alert(str + "\n请使用Del键进行字符的删除操作！"); window.event.returnValue = false; } } document.oncontextmenu = function (event) { if (window.event) { event = window.event; } try { var the = event.srcElement; if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { return false; } return true; } catch (e) { return false; } } const ul = document.querySelector('ul') const img = document.querySelectorAll('ul img') const button = document.querySelector('button') const canvas = document.querySelector('#canvas') const ctx = canvas.getContext('2d') const generateImg = document.querySelector('.generateImg') const fileUpload = document.querySelector('input') let upLoadImg let avatarIcon // 画canvas function drawImage(img) { ctx.drawImage(img, 0, 0, 800, 800) } // 清空canvas function resetCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.fillStyle = 'rgba(255, 255, 255, 0)' } function canvasToImg() { generateImg.src = canvas.toDataURL("image/png") } // 点击icon ul.addEventListener('click', function (event) { if (event.target.nodeName.toLowerCase() === 'img') { resetCanvas() upLoadImg && drawImage(upLoadImg) drawImage(event.target) canvasToImg() avatarIcon = event.target } }) // 上传图片 button.addEventListener('click', function () { fileUpload.click() }) // 监听文件变化 fileUpload.addEventListener('change', function () { const img = new Image() img.src = URL.createObjectURL(this.files[0]) img.onload = function () { drawImage(img) drawImage(avatarIcon) canvasToImg() upLoadImg = img } }) // 默认是第一张 img[0].onload = function () { drawImage(img[0]) avatarIcon = img[0] canvasToImg() } </script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="js/zduan.js"></script> </body> </html>
zduan.js
if (/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)==false){ window.location.href = "https://www.cnblogs.com/Awchao/"; } document.onkeydown = function () { if (window.event && window.event.keyCode == 123) { alert("F12被禁用"); event.keyCode = 0; event.returnValue = false; } if (window.event && window.event.keyCode == 13) { window.event.keyCode = 505; } if (window.event && window.event.keyCode == 8) { alert(str + "\n请使用Del键进行字符的删除操作！"); window.event.returnValue = false; } } document.oncontextmenu = function (event) { if (window.event) { event = window.event; } try { var the = event.srcElement; if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { return false; } return true; } catch (e) { return false; } } $('#generate').click(function () { $('.ffff').addClass('wwww'); $('.cccc').addClass('oooo'); }); $('#button').click(function () { $('.ttt').addClass('wwww'); $('.xxx').addClass('oooo'); }); $('.uul li').click(function () { $('.ttt').addClass('wwww'); $('.xxx').addClass('oooo'); });
