java 教你如何给你的头像添加一个好看的国旗
作者:alterem 发布时间:2021-11-11 02:53:25
标签:java,头像,添加
今天朋友圈又火了,听说原因是 @腾讯官网 就能得到一顶绿色的帽子,啊呸,是一个好看的国庆节头像,可是听说没一会就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
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 使用lamda表达式对list进行求和Lambda 表达式是 JDK8 的一个新特性,最近写项目中求和计算使用的较多,写篇文章记录下。1、实
- 之前我一直认为 Mybatis 框架下已经实现预编译机制,很多东西都封装好了,应该基本上不会再有 SQL 注入问题了。近期在渗透中发现,在实
- Java中提供了画笔,可以使用画笔做出界面上的任何东西
- 方法重写(Override)和方法重载(Overload)都是面向对象编程中,多态特性的不同体现,但二者本身并无关联,它们的区别犹如马德华之
- Map接口Map提供了一种映射关系,其中的元素是以键值对(key-value)的形式存储的,能够实现根据key快速查找value;Map中的
- 概述从今天开始, 小白我将带大家开启 Java 数据结构 & 算法的新篇章.优先队列优先队列 (Priority Queue) 和队
- 1、普通用户与系统管理员用户的权限要有严格的区分。如果一个普通用户在使用查询语句中嵌入另一个Drop Table语句,那么是否允许
- 建造者模式概述建造者模式(Builder Pattern)属于创建型模式。它是将一个复杂的构建与其表示相分离,使得同样的构建过程可以创建不同
- 目录场景介绍自动填充处理器Mybatis-Plus配置类配置实体类中相关字段的自动填充策略在阿里开发手册的建表规约中有说明,数据库表中应该都
- 抛砖今天使用monio做S3存储时,添加云服务器初始化时一直在构建客户端抛出异常。MinioClient.builder() //NoCla
- 在Java里面,可以用复制语句”A=B”给基本类型的数
- 本文介绍了Spring Boot + MyBatis读写分离,有需要了解Spring+MyBatis读写分离的朋友可参考。希望此文章对各位有
- 引言 在多线程中,为了使线程安全,我们经常会使用synchronized和Lock进行代码同步和加锁,但是具体两者有什么区别,什
- 相信不少喜欢开发的朋友都已经知道微信小程序是个什么物种了,楼主也是从小程序内测期间就开始关注,并且也写过几个已经上线的微信小程序。但是基本上
- 背景在最近的项目中,有一个需求是对一个很大的数据库进行查询,数据量大概在几千万条。但同时对查询速度的要求也比较高。这个数据库之前在没有使用P
- 本文实例讲述了java实现mp3合并的方法。分享给大家供大家参考。具体实现方法如下:package test;import java.io.
- 批量添加一对多中间表建立中间表A,一个id对应多个lid;传入两条参数long id;//单个数值List lid;//集合数值dao层语句
- 如果你还不是很了解restful,或者认为restful只是一种规范不具有实际意义,推荐一篇osc两年前的文章:RESTful API 设计
- Collections工具类Java里关于聚合的工具类,包含有各种有关集合操作的静态多态方法,不能实例化(把构造函数私有化)public c
- 前言Springboot应用在启动的时候分为两步:首先生成 SpringApplication 对象 ,运行 SpringApplicati