国庆头像html代码

每年国庆节都会发现自己的好友头像加特效了，其实这种网站代码很简单，就是一个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>

国庆头像html代码相关推荐

祖国生日快乐，个性化国庆头像合成
在线直达地址: https://www.iloveimg.com/zh-cn/photo-editor 每逢节日,都会有一堆小工具刷屏,为用户头像加装饰,这些小工具,大多需要微信授权登录,收集用户信息 ...
国庆头像小程序源码，带独立版后台同时可添加小程序跳转+流量主，所有改动均可后台添加+带搭建教程
微信小程序实现国旗头像,国庆个性化头像国庆头像小程序源码,带独立版后台同时可添加小程序跳转+流量主,所有改动均可后台添加+带搭建教程快去挑选一个自己喜欢的国庆头像吧,只需简单两步即可制作自己专属国 ...
8种bootstrap团队会员头像样式代码
下载地址 8种bootstrap团队会员头像样式代码,基于bootstrap框架实现的会员头像图文描述,团队组成人员列表介绍,带css3鼠标悬停动画效果. dd:
微信小程序个性头像、国庆头像、新年头像、圣诞头像等合成
微信小程序个性头像.国庆头像.新年头像.圣诞头像等合成先看一下,整体效果,搜索微信小程序<我i头像> 微信小程序生成国庆头像工具,祝大家国庆快乐#国庆 1 操作与对应技术点 1 用 ca ...
2022国庆头像小程序最新可用源码
正文: 实测搭建成功,功能没问题,明天国庆节了,可以提前布局了. 云开发国庆头像生成器,完整版,附带流量主接口,开发工具打开即可,需要添加合法域名,教程我都放文档里了,小白都能搭建,类目选择信息查询. ...
2022国庆头像制作iAPP安卓源码+附APP成品
正文: 测试机型:安卓11系统,还在为没有办法制作国庆头像而担心吗,有这个这个头像制作器,就不用担心了,有源码,如果不需要源码直接用成品即可. 程序: wwgefu.lanzoub.com/iJNAU ...
【多功能小程序】古风姓氏圣诞国庆头像生成小程序源码
多功能生成头像小程序姓氏头像圣诞头像国庆头像形状头像公式头像下载地址:
php上传头像的代码,php头像上传预览实例代码
说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过form表单,点击submi ...
【Java】渐变头像生成-代码实现
获取必不可少的工具类代码 imagetool: 图片转字符图片工具类,支持 Gif 动画.图片合并.图片加水印等图片处理其他工具类方法.详情请看https://gitee.com/xshuai/ima ...

国庆头像html代码

国庆头像html代码相关推荐

最新文章

热门文章