<!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>
