【免费】微信个人名片生成HTML源码上传服务器即可使用

共8个文件

html：3个

js：3个

jpg：1个

微信

html

需积分: 0 74 浏览量 2023-12-20 10:28:39 上传评论收藏 223KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

36690.zip （8个子文件）

36690

微信个人名片生成源码

style.css 6KB

说明.html 3KB

layui.js 21KB

更多资源下载.html 68B

img.jpg 131KB

index.html 7KB

html2canvas.min.js 194KB

jquery.min.js 105KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>微信名片生成</title> <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_3028863_e21gwd5m2s.css"> <link rel="stylesheet" type="text/css" href="./style.css"> </head> <body> <header><h3>微信个人名片在线生成</h3></header> <div class="img-box"> <img src="./img.jpg"/> <div class="box"> <span class="dss">13:14 ♡</span> <div class="imgs"><img class="imgs-i1" src="./img.jpg"></div> <div class="left"> <img class="logos imgs-i2" src="./img.jpg"> <div><h3 id="wxName">不错吧源码</h3><p class="ids">WeChat ID：<span id="wxId">bbs.bucuoba.com</span></p></div> </div> <div class="ewms" id="ewms"><span class="iconfont icon-erweima"></span><span class="iconfont icon-qianwang"></span></div> <a class="status">＋ <span id="wxStatus">不错吧源码</span></a> </div> <div class="alerts"> <img src="./images/kkbk.png"> <a id="close">×</a> </div> </div> <div class="input-box"> <div class="input-tiem"><label>微信名:</label><input type="text" id="ipt-name" placeholder="输入微信名称"></div> <div class="input-tiem"><label>微信号:</label><input type="text" id="ipt-id" placeholder="输入微信账号"></div> <div class="input-tiem"><label>状态栏:</label><input type="text" id="ipt-status" placeholder="输入微信状态"></div> <div class="input-tiem"><label>头像:</label><button class="btn-upload">上传头像</button><input class="ipt-file" type="file" accept="image/gif,image/jpeg,image/jpg,image/png" placeholder="微信头像" style="display:none;"></div> <div class="button-tiem"> <button id="btn-sc">立即生成</button> <button id="btn-download">保存图片</button> </div> </div> <div> </div> <script src="./html2canvas.min.js"></script> <script src="./jquery.min.js"></script> <script> $(".ewms").click(function() { $(".alerts").show(500); }); $("#close").click(function() { $(".alerts").hide(500); }); //点击了提交信息 document.querySelector('#btn-sc').addEventListener('click', () => { let wxName = document.querySelector('#wxName') let wxId = document.querySelector('#wxId') let wxStatus = document.querySelector('#wxStatus') let iptname = document.querySelector('#ipt-name') let iptid = document.querySelector('#ipt-id') let iptstatus = document.querySelector('#ipt-status') let data = { name: '暴躁的赫', id: '不易显示', status: '先活着吧，日后在慢慢想' } if (iptname.value != '') { data.name = iptname.value; } if (iptid.value != '') { data.id = iptid.value } if (iptstatus.value != '') { data.status = iptstatus.value } wxName.innerText = data.name; wxId.innerText = data.id; wxStatus.innerText = data.status; }) //点击了下载 document.querySelector('#btn-download').addEventListener('click', () => { html2canvas(document.querySelector('.img-box'), { useCORS: true,//开启跨域 backgroundColor: '#eeeeee',// 设置背景颜色 }).then(canvas => { // document.body.appendChild(canvas); convertCanvasToImg(canvas) }) }) //获取上传图片按钮 let btnimg = document.querySelector(".btn-upload"); //绑定点击事件 btnimg.addEventListener("click", function () { //拿到隐藏的文件上传域 let fileDomain = document.querySelector(".ipt-file"); //触发文件上传域事件 fileDomain.click(); }); //文件上传域元素 let fileInput = document.querySelector(".ipt-file"); //用来存放base64图片的数组 var fileList = []; //给文件上传域绑定change事件 fileInput.addEventListener("change", function () { $(".btn-upload").text("头像上传成功,可再次更换") //获取存放图片的容器 let imgi1 = document.querySelector(".imgs-i1"); let imgi2 = document.querySelector(".imgs-i2"); let imgi3 = document.querySelector(".img-box>img"); //获取上传的图片 let file = fileInput.files[0]; //准备读取图片 if (window.FileReader && file) { //调用图片读取方法 var reader = new FileReader(); //读取图片 reader.readAsDataURL(file); //监听图片读取进度 reader.onloadend = function (e) { //读取成功，拿到base64编码 let imgBase64 = e.target.result; fileList.push(imgBase64); imgi1.setAttribute("src", `${imgBase64}`) imgi2.setAttribute("src", `${imgBase64}`) imgi3.setAttribute("src", `${imgBase64}`) }; } }) //转换图片格式 function convertCanvasToImg(canvas) { // canvas base64 转 blob var myBlob = dataURLtoBlob(canvas.toDataURL('img/png', 0.92)) // blob转URL对象 myUrl = URL.createObjectURL(myBlob) // 创建a标签，下载图片 downImg(myUrl) } //base64 转 blob function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); } var jschars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; function generateMixed(n) {//n为随机生成的几位数字 var res = ""; for (var i = 0; i < n ; i++) { var id = Math.ceil(Math.random() * 35); res += jschars[id]; } return res; } //下载图片 filename是图片名称 function downImg(url) { // 创建a标签并设置其相关属性，最后触发其点击事件 let a = document.createElement("a") let clickEvent = document.createEvent("MouseEvents"); a.setAttribute("href", url) a.setAttribute("download", generateMixed(12)) a.setAttribute("target", '_blank') clickEvent.initEvent('click', true, true) a.dispatchEvent(clickEvent); } </script> </body> </html>

评论收藏

内容反馈