国庆头像html代码

最新推荐文章于 2024-05-02 20:15:52 发布

程序员陈晨

最新推荐文章于 2024-05-02 20:15:52 发布

阅读量850

点赞数

文章标签： servlet html javascript

本文链接：https://blog.csdn.net/m0_70128830/article/details/127136321

版权

每年国庆节都会发现自己的好友头像加特效了，其实这种网站代码很简单，就是一个html单页替换下头像框就可以了。

<html lang="en">
<head>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width,maximum-scale=1.0,minimum-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>国庆头像在线制作</title>
<link rel="shortcut icon" href="https://suyinwl.cn/tx/1.ico" type="image/x-icon"/>
<style>
a:link{color:#fff;text-decoration: none;}
a:visited{color:#fff;}
#export{display:none;margin:0 auto;width:250px;height:250px;margin-top:50px;margin-bottom:50px}
.operation-btns .o-btn1{background-size:11.6rem 4.325rem}
.operation-btns .o-btn2{background-size:11.6rem 3.75rem}
center{color: #fff;}
</style>
<link rel="stylesheet" type="text/css" href="img/strap.min.css">
</head>
<body>
<div class="wrapper">
<img src="index.html" alt="" class="img-load" style="width: 9.5rem; position: fixed; top: 0px; left: -9999px;">
<div class="operation-header">
<div class="h-title">

</div>
</div>
<div class="operation-box">
<a class="prev" onClick='changeHat()'></a>
<div class="operation-img">
<div class="cropper-content" id="content">
<canvas class="" id='cvs'></canvas>
</div>
</div>
<a class="next" onClick='changeHat()'></a>
</div>
<img id='export' alt='国庆专属头像' src='index.html' />
<div class="operation-btns">
<a class="o-btn1">
<input class="o-btn1" id='upload' type='file' οnchange='viewer()' style='opacity: 0;'>
</a>
<a class="o-btn2" onClick='exportFunc()' style="display: none;">
</a>
</div>

<div class="operation-done">
<img src="img/act-done-happy.png" alt="" class="act-done-happy">
</div>
<center>
<a href="https://www.suyinwl.cn" target="_blank">国庆头像在线制作</a>

</center>
</div>
<div style='display: none'>
<img id='img' src='index.html' alt='' />
<img class='hide' id='hat0' src='img/hat7.png' />
<img class='hide' id='hat1' src='img/hat0.png' />
<img class='hide' id='hat2' src='img/hat2.png' />
<img class='hide' id='hat3' src='img/hat3.png' />
<img class='hide' id='hat4' src='img/hat1.png' />
<img class='hide' id='hat5' src='img/hat4.png' />
<img class='hide' id='hat6' src='img/hat5.png' />
<img class='hide' id='hat7' src='img/hat6.png' />
</div>
<script src="img/fabric.min.js"></script>
<script>
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext("2d");
var exportImage = document.getElementById("export");
var img = document.getElementById("img");
var hat = "hat0";
var canvasFabric;
var hatInstance;
//var screenWidth = window.screen.width < 500 ? window.screen.width : 300;
var screenWidth = document.getElementById("content").scrollHeight;
function viewer() {
var file = document.getElementById("upload").files[0];
console.log(file);
var reader = new FileReader;
if (file) {
reader.readAsDataURL(file);
reader.onload = function(e) {
img.src = reader.result;
img.onload = function() {
img2Cvs(img)
}
}
} else {
img.src = ""
}
}
function img2Cvs(img) {
cvs.width = img.width;
cvs.height = img.height;
cvs.style.display = "block";
canvasFabric = new fabric.Canvas("cvs", {
width: screenWidth,
height: screenWidth,
backgroundImage: new fabric.Image(img, {
scaleX: screenWidth / img.width,
scaleY: screenWidth / img.height
})
});
changeHat();

/*document.getElementById("exportBtn").style.display = "none";
document.getElementById("tip").innerHTML = "长按图片保存或分享";
document.getElementById("change").style.display = "none";*/
cvs.style.display = "none";
exportImage.style.display = "block";
exportImage.src = canvasFabric.toDataURL({
width: screenWidth,
height: screenWidth
});
alert('长按图片保存或分享');
}
</script>
</body>
</html>