java 教你如何给你的头像添加一个好看的国旗
作者:alterem 时间:2021-11-11 02:53:25
今天朋友圈又火了,听说原因是 @腾讯官网 就能得到一顶绿色的帽子,啊呸,是一个好看的国庆节头像,可是听说没一会就502了,那么我们自己动手实现一个吧
由于代码比较简单就不一一介绍了。
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext("2d");
var exportImage = document.getElementById("export");
var img = document.getElementById("img");
var hat = "hat6";
var canvasFabric;
var hatInstance;
var screenWidth = window.screen.width < 500 ? window.screen.width : 300;
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("uploadContainer").style.display = "none";
document.getElementById("uploadText").style.display = "none";
document.getElementById("upload").style.display = "none";
document.getElementById("change").style.display = "block";
document.getElementById("exportBtn").style.display = "block";
document.getElementById("tip").style.opacity = 1
}
function changeHat() {
document.getElementById(hat).style.display = "none";
var hats = document.getElementsByClassName("hide");
hat = "hat" + (+hat.replace("hat", "") + 1) % hats.length;
var hatImage = document.getElementById(hat);
hatImage.style.display = "block";
if (hatInstance) {
canvasFabric.remove(hatInstance)
}
hatInstance = new fabric.Image(hatImage, {
top: 40,
left: screenWidth / 3,
scaleX: 100 / hatImage.width,
scaleY: 100 / hatImage.height,
cornerColor: "#0b3a42",
cornerStrokeColor: "#fff",
cornerStyle: "circle",
transparentCorners: false,
rotatingPointOffset: 30
});
hatInstance.setControlVisible("bl", false);
hatInstance.setControlVisible("tr", false);
hatInstance.setControlVisible("tl", false);
hatInstance.setControlVisible("mr", false);
hatInstance.setControlVisible("mt", false);
canvasFabric.add(hatInstance)
}
function exportFunc() {
document.getElementsByClassName("canvas-container")[0].style.display = "none";
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
})
}
最后效果
拖动图片可见已经拼合成一张完整图片了
右键查看源代码
所有图片素材均来自腾讯官网源码地址:https://gitee.com/alterem/avatar
演示地址:http://alterem.gitee.io/avatar/
来源:https://segmentfault.com/a/1190000020482505
标签:java,头像,添加
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
SSH原理及两种登录方法图文详解
2023-11-14 11:10:53
![](https://img.aspxhome.com/file/2023/8/59038_0s.png)
JVM代码缓存区CodeCache原理及用法解析
2023-08-09 06:02:29
![](https://img.aspxhome.com/file/2023/8/61768_0s.jpg)
opencv利用鼠标滑动画出多彩的形状
2023-11-03 05:20:57
![](https://img.aspxhome.com/file/2023/6/94046_0s.jpg)
Java泛型定义与用法实例详解
2023-11-25 11:50:28
java实现ftp上传 如何创建文件夹
2021-06-10 10:49:17
java中的常用集合类整理
2022-08-22 10:35:49
Mybatis如何解决sql中like通配符模糊匹配问题
2023-12-22 19:39:52
springboot跨域CORS处理代码解析
2022-07-29 21:12:20
![](https://img.aspxhome.com/file/2023/4/69284_0s.png)
JAVA递归生成树形菜单的实现过程
2023-07-15 08:57:22
![](https://img.aspxhome.com/file/2023/2/57712_0s.png)
SpringBoot应用jar包启动原理详解
2022-07-08 09:45:48
![](https://img.aspxhome.com/file/2023/2/69122_0s.png)
java类中生成jfreechart,返回图表的url地址 代码分享
2023-09-08 00:54:07
简单阐述一下Java集合的概要
2023-08-23 19:49:45
![](https://img.aspxhome.com/file/2023/0/58300_0s.png)
java 面试题闰年判断详解及实例
2023-11-27 19:09:01
关于@Autowired注入依赖失败的问题及解决
2023-11-29 00:50:42
![](https://img.aspxhome.com/file/2023/4/60474_0s.png)
ServletWebServerApplicationContext创建Web容器Tomcat示例
2023-10-12 12:28:33
IDEA教程之Activiti插件图文详解
2023-11-14 23:06:45
![](https://img.aspxhome.com/file/2023/6/59726_0s.png)
SpringBoot之如何指定配置文件启动
2023-11-17 15:17:48
![](https://img.aspxhome.com/file/2023/5/59505_0s.png)
Unity实现场景漫游相机
2023-06-15 19:08:57
springboot中PostMapping正常接收json参数后返回404问题
2021-07-22 20:46:28
修改Maven settings.xml 后配置未生效的解决
2023-07-06 22:17:03