189 8069 5689
近日朋友圈又火了，听说原因是 @腾讯官网 就能得到一个好看的国庆节头像，那么我们自己动手实现一个吧，教你如何给你的头像添加一个好看的国旗。
创新互联长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为庐江企业提供专业的成都网站建设、成都网站设计，庐江网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。
由于代码比较简单就不一一介绍了。
- 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
- })
- }
效果
所有图片素材均来自腾讯官网