优化生成后的图片为10801920格式为:png!DOCTYPE htmlhtmlhead title生成带隶书的封面图片title meta charset=UTF-8 link rel=stylesheet type=textcss href=stylecss script src=httpscodejquerycomjquery-360minjsscript script sr
优化后的代码:
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。
原文地址: http://www.cveoy.top/t/topic/biqc 著作权归作者所有。请勿转载和采集!