我正在通过定义的字母表转换用户输入的字母表。它有两个div id来显示结果#outputText和#imageContainer。#outputText显示转换后的文本,#imageContainer显示转换后的文本图像。这两个ID都不会显示在页面加载中。它显示用户输入的结果。但我想显示这两个div与一个空框或预览定义的字母表中的div在页面加载。这是代码,我试着用这个代码来实现.
$(document).ready(function() {
const inputText = $('#inputText');
const outputText = $('#outputText');
const imageContainer = $('#imageContainer');
const fontSizeInput = $('#fontSize');
const fontColorInput = $('#fontColor');
const backgroundColorInput = $('#backgroundColor');
const fontWeightSelect = $('#fontWeight');
const downloadButton = $('#downloadButton');
const copyButton = $('#copyButton');
inputText.on('input', generateFont);
fontSizeInput.on('input', generateFont);
fontColorInput.on('input', generateFont);
backgroundColorInput.on('input', generateFont);
fontWeightSelect.on('change', generateFont);
downloadButton.on('click', downloadImage);
copyButton.on('click', copyText);
function generateFont() {
const text = inputText.val();
const transformedText = transformText(text);
outputText.text(transformedText);
generateImage(transformedText);
}
function transformText(text) {
const alphabet = {
'A': 'Λ',
'B': 'ß',
'C': 'Ͼ',
'D': 'Ð',
'E': 'Σ',
'F': 'Ŧ',
'G': '₲',
'H': 'Ή',
'I': 'ł',
'J': 'J',
'K': 'Ҝ',
'L': 'Ł',
'M': 'M',
'N': 'И',
'O': 'Ø',
'P': '₱',
'Q': 'Q',
'R': 'S',
'S': 'Ş',
'T': 'Ŧ',
'U': 'Ц',
'V': 'V',
'W': '₩',
'X': 'Ж',
'Y': 'Ψ',
'Z': 'Z'
};
const transformedText = text
.toUpperCase()
.split('')
.map((char) => (alphabet.hasOwnProperty(char) ? alphabet[char] : char))
.join('');
return transformedText;
}
function generateImage(text) {
const canvas = $('<canvas>')[0];
const context = canvas.getContext('2d');
const fontSize = parseInt(fontSizeInput.val());
const fontColor = fontColorInput.val();
const backgroundColor = backgroundColorInput.val();
const fontWeight = fontWeightSelect.val();
context.font = `${fontWeight} ${fontSize}px "Courier New", Courier, monospace`;
const textWidth = context.measureText(text).width;
const textHeight = fontSize;
canvas.width = textWidth;
canvas.height = textHeight;
context.fillStyle = backgroundColor;
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = fontColor;
context.font = `${fontWeight} ${fontSize}px "Courier New", Courier, monospace`;
context.textBaseline = 'middle';
context.fillText(text, 0, canvas.height / 2);
const imageElement = $('<img>').attr('src', canvas.toDataURL('image/png'));
imageContainer.html(imageElement);
}
function downloadImage() {
const imageElement = imageContainer.find('img')[0];
const link = $('<a>').attr('href', imageElement.src).attr('download', 'cool_font.png')[0];
link.click();
}
function copyText() {
const transformedText = outputText.text();
navigator.clipboard.writeText(transformedText)
.then(() => {
alert('Text copied to clipboard!');
})
.catch((error) => {
console.error('Error copying text to clipboard:', error);
});
}
});
body {
text-align: center;
margin-top: 100px;
}
#inputText {
font-size: 24px;
padding: 10px;
}
#outputText {
font-family: "Courier New", Courier, monospace;
font-size: 48px;
margin-top: 20px;
}
#imageContainer {
margin-top: 20px;
}
.button {
margin-top: 20px;
}
.option {
margin-top: 10px;
}
<h1>Cool Font Generator</h1>
<input type="text" id="inputText" placeholder="Enter text">
<div id="outputText"></div>
<div class="option">
<label for="fontSize">Font Size:</label>
<input type="number" id="fontSize" min="10" max="100" value="48">
</div>
<div class="option">
<label for="fontColor">Font Color:</label>
<input type="color" id="fontColor" value="#FFFFFF">
</div>
<div class="option">
<label for="backgroundColor">Background Color:</label>
<input type="color" id="backgroundColor" value="#000000">
</div>
<div class="option">
<label for="fontWeight">Font Weight:</label>
<select id="fontWeight">
<option value="normal">Normal</option>
<option value="bold">Bold</option>
</select>
</div>
<div id="imageContainer"></div>
<button class="button" id="downloadButton">Download Image</button>
<button class="button" id="copyButton">Copy Text</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
1条答案
按热度按时间j5fpnvbx1#
正如**@CBroe**在评论中所建议的,您可以添加
min-height
(或height
,如果您希望它保持一行宽):它看起来像这样: