master

分支 (1)

管理

管理

master

xlgqtx
/
index.html

<!doctype html>
<html>

<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="http://tools.frtmwm.cn/flag/favicon.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="css/strap.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
	<div class="wrapper">
		<img src="" 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="">
		<div class="operation-btns">
			<a class="o-btn1">
				<input class="o-btn1" id="upload" type="file" onchange="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>
		<div class="recommon-wrap">
			<a href="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzkxMjE4NDUzOA==&action=getalbum&album_id=1693786638985773058&scene=173&from_msgid=2247485906&from_itemidx=2&count=3&nolastread=1#wechat_redirect">
				前往最新活动、实用软件、优质文章和热门资源等
			</a>
		</div>
	</div>
	<div style="display: none">
		<img id="img" src="" alt="">
		<img class="hide" id="hat0" src="img/hat6.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/hat7.png">
	</div>
	<script src="js/fabric.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.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.getElementsByClassName("o-btn1")[0].style.display = "none";
			document.getElementsByClassName("o-btn2")[0].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)
			}
			console.log(hatImage.width);
			console.log(100 / hatImage.width);
			hatInstance = new fabric.Image(hatImage, {
				top: 0,
				left: 0,
				scaleX: screenWidth / hatImage.width,
				scaleY: screenWidth / 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("operation-box")[0].style.display = "none";
			document.getElementsByClassName("operation-btns")[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
			});
			alert('长按图片保存或分享');
		}
	</script>
</body>

</html>