avatar1
/
index.html

<!DOCTYPE  html>
<html lang='zh-cn'>
<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>制作自己的国庆专属头像 - Alterem</title>
<style>
    body {
      font-size: 20px;
      text-align: center;
      margin: 0;
    }
    label {
      position: fixed;
      bottom: 0;
      left: 0;
      font-size: 10px;
    }
    button {
      font-size: 18px;
      color: #fff;
      padding: 0 30px;
      height: 2.3rem;
      background: #8fd16f;
      border: 0;
      border-radius: 20px;
    }
    #cvs {
      display: none;
      margin: 0 auto;
    }
    #export {
      display: none;
      margin: 0 auto;
      width: 250px;
      height: 250px;
    }
    .header {
      color: #108757;
      height: 3rem;
    }
    .canvas-container {
      margin: 0 auto;
    }
    .hide, #exportBtn {
      display: none;
    }
    .body {
      margin: 4rem auto 3rem;
      height: 10rem;
      width: 10rem;
      border: solid 1px #aaa;
      box-shadow: 0 0 5px #aaa;
      border-radius: 1rem;
      line-height: 10rem;
      position: relative;
    }
    .footer {
      display: flex;
      justify-content: space-around;
    }
</style>
</head>
<body>
<div class='header'>
    <h2>制作自己的国庆专属头像</h2>
</div>
<div class='body' id='uploadContainer'>
    <small id='uploadText'>上传头像</small>
    <input id='upload' type='file' onchange='viewer()' style='height: 10rem; width: 10rem; position: absolute; top: 0; left: 0; opacity: 0'>
</div>
<img id='export' alt='国庆节快乐' src=''/><canvas id='cvs'></canvas>
<p id='tip' style='opacity: 0'>
    点击调整位置和大小
</p>
<div class='footer'>
    <button id='change' onclick='changeHat()' style='display: none;'>换个样式</button>
    <button id='exportBtn' onclick='exportFunc()'>生成头像</button>
</div>
<div style='display: none'>
    <img id='img' src='' alt=''/>
    <img class='hide' id='hat0' src='./img/hat0.png'/>
    <img class='hide' id='hat1' src='./img/hat1.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/hat0.png'/>
    <img class='hide' id='hat5' src='./img/hat1.png'/>
    <img class='hide' id='hat6' src='./img/hat2.png'/>
    <img class='hide' id='hat7' src='./img/hat3.png'/>
</div>
<script src="./js/fabric.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 = "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
		})
	}
</script>
</body>
</html>