优化后的代码:

HTML代码:

<!DOCTYPE html>
<html>
<head>
	<title>生成带隶书的封面图片</title>
        <meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="script.js"></script>
</head>
<body>
	<div class="container">
		<h1>生成带隶书的封面图片</h1>
		<div class="form">
			<input type="text" id="book-title" placeholder="输入书名">
			<input type="text" id="author" placeholder="输入作者">
			<button id="generate-btn">生成封面</button>
		</div>
		<div class="result">
			<img id="cover-img" src="" alt="封面图片">
		</div>
	</div>
</body>
</html>

CSS代码:

.container {
	max-width: 800px;
	margin: 0 auto;
	padding: 50px;
	text-align: center;
}

h1 {
	font-size: 36px;
	margin-bottom: 30px;
}

.form {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 50px;
}

input[type="text"] {
	padding: 10px;
	margin-right: 20px;
	font-size: 18px;
	border: none;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

button {
	padding: 10px 20px;
	font-size: 18px;
	background-color: #4CAF50;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.result {
	display: none;
}

img {
	max-width: 100%;
}

JavaScript代码:

$(document).ready(function() {
	// 点击生成封面按钮
	$('#generate-btn').click(function() {
		var bookTitle = $('#book-title').val();
		var author = $('#author').val();

		// 判断输入框是否为空
		if (bookTitle == '' || author == '') {
			alert('书名和作者不能为空');
			return;
		}

		// 生成封面图片的URL
		var coverUrl = 'https://dummyimage.com/1080x1920/000/fff&text=' + bookTitle + '%0A' + author + '&.png';
		coverUrl = encodeURI(coverUrl);

		// 修改封面图片的src属性
		$('#cover-img').attr('src', coverUrl);

		// 显示封面图片
		$('.result').show();
	});
});

优化后主要是在JavaScript代码中对生成图片的URL进行优化,将图片的大小修改为1080*1920,并且将图片格式修改为png。

优化生成后的图片为10801920格式为:png!DOCTYPE htmlhtmlhead	title生成带隶书的封面图片title meta charset=UTF-8	link rel=stylesheet type=textcss href=stylecss	script src=httpscodejquerycomjquery-360minjsscript	script sr

原文地址: http://www.cveoy.top/t/topic/biqc 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录