最近大家是不是看到很多朋友的头像已经换成国庆专属头像了？我去小程序看了一下，发现要看视频才能保存图片，真的太气人了！！
于是想自己写一个网页版，随心所欲选择样式，想换就换！！
在线定制地址：国庆专属头像
从手机相册选择一个头像（最好是正方形），然后选择一个喜欢的样式，再点击生成就可以了。
这个项目是我从Git上面找的，当时代码已经写的差不多了，但是缺少头像样式，所以就去Git上面看了一下，发现已经有大佬制作好了，于是在大佬的基础上改了一点东西，搭建到我的主机上给大家免费使用。
github源码地址
因为大佬的原项目的文件上传只是一个input，没有样式，所以我加了一个label。
<div class="operation-btns">
<label class="button_qwe" for="fle" >选择头像</label>
<input type="file" id="fle" accept="image/*" style="position:absolute;clip:rect(0 0 0 0);" >
</div>
另外大佬的项目里面选择头像之后还要点击上传才能显示在页面中，我觉得这样是比较繁琐的，新加了一点代码，使其选择完图片时直接显示。
$('#fle').change(function () {
// 先获取用户上传的文件对象
let fileObj = this.files[0];
// 生成一个文件读取的内置对象
let fileReader = new FileReader();
// 将文件对象传递给内置对象
fileReader.readAsDataURL(fileObj); //这是一个异步执行的过程，所以需要onload回调函数执行读取数据后的操作
// 将读取出文件对象替换到img标签
fileReader.onload = function(){ // 等待文件阅读器读取完毕再渲染图片
$('#create').css('display','inline-block');//显示生成头像
$('#cropper-img').attr('src',fileReader.result);
}
});
完整html代码：
github源码地址
<!doctype html>
<!DOCTYPE html><html lang="en" style="opacity: 1; font-size: 26.6666px;"><head><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="迎国庆换新颜">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta name="renderer" content="webkit">
<meta name="format-detection" content="telphone=no,email=no,address=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="icon" href="img/logo.png">
<title>
迎国庆换新颜-国庆头像
</title>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?fea455faf8a55b8c58928f6fe0af0800";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script charset="utf-8" async="" src="js/jweixin-1.0.0.js">
</script>
<style>.p2{
font-size:20px;color:#3a2d2db8;text-align:center;
}
a{text-decoration: none;}
a:hover, a:focus {
color: #74777b;
}</style>
<script>
!
function() {
var i = 0; !
function e(t) {
var n = 40; (document.documentElement.clientWidth !== window.innerWidth || 0 === document.documentElement.clientWidth && 0 === window.innerWidth) && i < 10 ? (document.documentElement.style.opacity = 0, window.setTimeout(e, 0), i++) : (document.documentElement.style.opacity = 0, setTimeout(function() {
var e = 500 < window.innerWidth ? 500 : window.innerWidth;
n = parseInt(e / 750 * 1e4 * 40) / 1e4,
document.documentElement.style.opacity = 1,
document.documentElement.style.fontSize = n + "px"
},
0))
} ()
} ()
</script>
<script src="js/TGMobileShare-noadtag19.min.js">
</script>
<script>
!
function(n) {
"use strict";
n.loadCSS || (n.loadCSS = function() {});
var o = loadCSS.relpreload = {};
if (o.support = function() {
var e;
try {
e = n.document.createElement("link").relList.supports("preload")
} catch(t) {
e = !1
}
return function() {
return e
}
} (), o.bindMediaToggle = function(t) {
function e() {
t.media = a
}
var a = t.media || "all";
t.addEventListener ? t.addEventListener("load", e) : t.attachEvent && t.attachEvent("onload", e),
setTimeout(function() {
t.rel = "stylesheet",
t.media = "only x"
}),
setTimeout(e, 3e3)
},
o.poly = function() {
if (!o.support()) for (var t = n.document.getElementsByTagName("link"), e = 0; e < t.length; e++) {
var a = t[e];
"preload" !== a.rel || "style" !== a.getAttribute("as") || a.getAttribute("data-loadcss") || (a.setAttribute("data-loadcss", !0), o.bindMediaToggle(a))
}
},
!o.support()) {
o.poly();
var t = n.setInterval(o.poly, 500);
n.addEventListener ? n.addEventListener("load",
function() {
o.poly(),
n.clearInterval(t)
}) : n.attachEvent && n.attachEvent("onload",
function() {
o.poly(),
n.clearInterval(t)
})
}
"undefined" != typeof exports ? exports.loadCSS = loadCSS: n.loadCSS = loadCSS
} ("undefined" != typeof global ? global: this)
</script>
<link href="css/chunk-nationaldayhead-vendors.0f433423.css"
rel="stylesheet" as="style" onload="this.οnlοad=null,this.rel="stylesheet"">
<noscript>
<link href="https://qnlite.gtimg.com/qqnewslite/css/chunk-nationaldayhead-vendors.0f433423.css"
rel="stylesheet">
</noscript>
<link rel="stylesheet" type="text/css" href="css/r-nationaldayhead.6e9074cf.css">
<script charset="utf-8" src="js/r-nationaldayhead.516767eb.js">
</script>
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body class="">
<div id="app">
<!---->
<div class="wrapper" style="background-image: url('img/background-image.png');">
<!-- <img src="http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eruzEDjGnUFZ8czjIvuBY1xh7Fep9T2gPmRxBoczBVgctkgR2zmsibodaiaqqthY65KiaEYtWzMoxCEg/0"
alt="" class="img-load" style="width: 9.5rem; position: fixed; top: 0px; left: -9999px;"> -->
<div class="operation-header">
<!-- <div class="h-logo">
</div> -->
<div class="h-title" style="background-image: url('img/title-image.png');">
</div>
<div class="h-slogan" style="background-image: url('img/slogan-image.png');">
</div>
</div>
<div class="operation-number">
选择头像后点击左右按钮切换样式。
</div>
<div class="operation-box">
<div class="prev">
</div>
<div class="operation-img">
<div class="cropper-content">
<!--width: 1012px; height: 1012px; transform: scale(0.250324, 0.250324) translate3d(-1515.38px, -1515.38px, 0px) rotateZ(0deg)-->
<div data-v-6dae58fd="" class="vue-cropper" id="vue-cropper">
<div data-v-6dae58fd="" class="cropper-box" id="cropper-box">
<!-- <div data-v-6dae58fd="" class="cropper-box-canvas" style="">
</div> -->
<img style="width: 100%;height: 100%;" src="img/head.png" alt="cropper-img" id="cropper-img">
<img src="img/hat1.png" class="frame-image" id="FrameImage">
</div>
<div data-v-6dae58fd="" class="cropper-drag-box cropper-move">
</div>
<div data-v-6dae58fd="" class="cropper-crop-box" style="width: 0px; height: 0px; transform: translate3d(0px, 0px, 0px); display: none;">
<span data-v-6dae58fd="" class="cropper-view-box">
<!-- <img data-v-6dae58fd="" src="blob:https://rl.inews.qq.com/ea5cb9d2-d588-467b-86c7-cc3b33cd260b"
alt="cropper-img" style="width: 1012px; height: 1012px; transform: scale(0.250324, 0.250324) translate3d(-1515.38px, -1515.38px, 0px) rotateZ(0deg);"> -->
</span>
<span data-v-6dae58fd="" class="cropper-face cropper-move">
</span>
<!---->
<!---->
</div>
</div>
</div>
</div>
<div class="next">
</div>
</div>
<div class="operation-btns">
<label class="button_qwe" for="fle" >选择头像</label>
<input type="file" id="fle" accept="image/*" style="position:absolute;clip:rect(0 0 0 0);" >
<!-- <a type="button" id="up_button" class="button_qwe">上传头像</a>-->
</div>
<div class="operation-btns">
<!-- <div class="o-btn o-btn2" style="background-image:none;">
</div> -->
<a type="button" id="create" style="display: none;" class="button_qwe">生成头像</a>
</div>
<div class="operation-btns">
<a type="button" id="down_button" style="display: none;" class="button_qwe">下载</a>
</div>
<!---->
<div class="shade-box" style="display:none;z-index: 2004;width: 100%;height: 100%;position: fixed;top: 0;left: 0; background: rgba(0,0,0,0.3);"></div>
<div class="van-popup van-popup--center" style="z-index: 2005;display: none;">
<div class="long-press">
<div class="l-img">
<img id="head_img" src="data:image/png;bas5Ch/78WAENtJv2RKgAAAABJRU5ErkJggg==">
</div>
<div class="l-tips">
长按保存图像
</div>
</div>
</div>
</div>
</div>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/chunk-vendors.836075e1.js"></script>
<script src="js/chunk-nationaldayhead-vendors.0ea1c589.js"></script>
<!--<script src="https://qnlite.gtimg.com/qqnewslite/js/nationaldayhead.5241bf47.js"></script> -->
<script src="js/WXJssdk.js"> </script>
<script src="js/qqapi.js?_bid=152"> </script>
<!-- <script type="text/javascript" src="https://mat1.gtimg.com/bbs/static/html2canvas.min.js" charset="utf-8"> </script> -->
<script src="js/html2canvas.min.js"></script>
<script type="text/javascript">
var FrameImage = ['img/head0.png','img/head2.png','img/head3.png','img/head4.png','img/head5.png','img/head6.png','img/head7.png','img/hat8.png','img/hat9.png','img/hat10.png','img/hat11.png','img/hat12.png','img/hat13.png','img/hat14.png','img/hat15.png','img/hat16.png','img/hat17.png','img/hat18.png','img/hat19.png','img/hat20.png','img/hat21.png','img/hat22.png','img/hat23.png','img/hat1.png'];
var indexS = -1;
function changeThemeType() {};
$('#fle').change(function () {
// 先获取用户上传的文件对象
let fileObj = this.files[0];
// 生成一个文件读取的内置对象
let fileReader = new FileReader();
// 将文件对象传递给内置对象
fileReader.readAsDataURL(fileObj); //这是一个异步执行的过程，所以需要onload回调函数执行读取数据后的操作
// 将读取出文件对象替换到img标签
fileReader.onload = function(){ // 等待文件阅读器读取完毕再渲染图片
$('#create').css('display','inline-block');//显示生成头像
$('#cropper-img').attr('src',fileReader.result);
}
});
$('.next').on('click',function(){
indexS++;
if(indexS>=FrameImage.length){
indexS = 0;
}
$('#FrameImage').attr('src',FrameImage[indexS]);
console.log(indexS)
});
$('.prev').on('click',function(){
indexS--;
if(indexS<0){
indexS = FrameImage.length-1;
}
$('#FrameImage').attr('src',FrameImage[indexS]);
console.log(indexS)
});
//上传
$('#up_button').on('click', () => {
var file = document.getElementById('fle')
var formData = new FormData()
formData.append('uploadImg', file.files[0]);
formData.append('name', 'zheng');
var reader = new FileReader();
//上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
var AllowImgFileSize = 4400000;
var file = $("#fle")[0].files[0];
var imgUrlBase64;
if (file) {
//将文件以Data URL形式读入页面
imgUrlBase64 = reader.readAsDataURL(file);
reader.onload = function (e) {
//var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert('上传失败，请上传不大于4M的图片！');
return;
} else {
//执行上传操作
console.log(reader.result);
$('#create').css('display','inline-block');//显示生成头像
$('#cropper-img').attr('src',reader.result);
//$.post('http://127.0.0.1:6080/upload', { img64: reader.result })
}
}
}
})
//这是另一种写法
$(function () {
$("#create").click(function () {
var width = $('#cropper-box').width()
var height = $('#cropper-box').height()
var canvasBox = document.createElement("canvas");
var scale = window.devicePixelRatio;
var rect = $('#cropper-box').get(0).getBoundingClientRect();
canvasBox.width = width * scale;
canvasBox.height = height * scale;
canvasBox.style.width = width + "px";
canvasBox.style.height = height + "px";
canvasBox.getContext("2d").scale(scale, scale);
canvasBox.getContext("2d").translate(-rect.left, -rect.top);
setTimeout(function(){
html2canvas($("#cropper-box")[0], {
useCORS: true,
dpi: window.devicePixelRatio*2,
allowTaint: true, // 是否使用图片跨域
//timeout: 100, // 延迟
canvas:canvasBox,
scale:scale,
width:width,
heigth:height,
// useCORS: true, // 不同版本不一样，我加上了
onrendered: function(canvas) {
// 返回canvas节点
//
$('.van-popup--center').css('display','inline-block');
$('.shade-box').css('display','inline-block');//显示遮罩
$('#head_img').attr('src',canvas.toDataURL());
$('#down_button').attr( 'href' , canvas.toDataURL() ) ;
$('#down_button').attr( 'download' , 'myjobdeer.png' ) ;
//$('#down_button').css('display','inline-block');
}
});
},10);
});
//点击遮罩
$('.shade-box').on('click',function(){
$('.shade-box').css('display','none');//遮罩
$('.van-popup--center').css('display','none');
})
});
</script>
<div style="text-align:center;width:90%;left:5%;bottom:10px;position:fixed;">
<a href="http://ridesharing.top" target="_blank" class="p2">皮小孩个人主页</a>
<a href="http://ridesharing.top/pictures.html" target="_blank" class="p2">随机图片</a>
<a href="http://ridesharing.top/tiangou.html" target="_blank" class="p2">舔狗语录</a>
</div>
</body></html>