<html>
<head>
<style>
#container {
display: flex;
flex-direction: column;
align-items: center;
}
#preview {
width: 500px;
height: 300px;
border: 1px solid black;
position: relative;
}
#preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
#preview p {
position: absolute;
bottom: 0;
width: 100%;
background-color: white;
margin: 0;
padding: 10px;
font-size: 20px;
text-align: center;
}
#input {
display: flex;
flex-direction: column;
margin-top: 20px;
}
#input label {
margin-bottom: 10px;
}
#input input[type="file"] {
display: none;
}
#input button {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="preview">
<img src="" alt="No image selected">
<p>Enter some text</p>
</div>
<div id="input">
<label for="image">Select an image:</label>
<input type="file" id="image" accept="image/*" onchange="loadImage(event)">
<label for="text">Enter some text:</label>
<input type="text" id="text" oninput="updateText(event)">
<button onclick="downloadImage()">Download featured image</button>
</div>
</div>
<script>
function loadImage(event) {
// get the selected file
var file = event.target.files[0];
// create a file reader object
var reader = new FileReader();
// set the onload callback function
reader.onload = function(e) {
// get the preview element
var preview = document.getElementById("preview");
// get the image element
var img = preview.getElementsByTagName("img")[0];
// set the image source to the file reader result
img.src = e.target.result;
// show the image
img.style.display = "block";
// adjust the preview height to match the image aspect ratio
var ratio = img.naturalWidth / img.naturalHeight;
preview.style.height = (preview.offsetWidth / ratio) + "px";
// get the paragraph element
var p = preview.getElementsByTagName("p")[0];
// adjust the paragraph font size to fit the preview height
p.style.fontSize = (preview.offsetHeight / 15) + "px";
// adjust the paragraph padding to match the font size
p.style.padding = (p.offsetHeight / 2) + "px";
// adjust the paragraph line height to center the text vertically
p.style.lineHeight = p.offsetHeight + "px";
// show the paragraph
p.style.display = "block";
// enable the download button
document.getElementById("input").getElementsByTagName("button")[0].disabled = false;
};
// read the file as a data URL
reader.readAsDataURL(file);
}
function updateText(event) {
// get the input value
var text = event.target.value;
// get the preview element
var preview = document.getElementById("preview");
// get the paragraph element
var p = preview.getElementsByTagName("p")[0];
// set the paragraph text to the input value
p.textContent = text;
}
function downloadImage() {
// get the preview element
var preview = document.getElementById("preview");
// create a canvas element
var canvas = document.createElement("canvas");
// set the canvas size to match the preview size
canvas.width = preview.offsetWidth;
canvas.height = preview.offsetHeight;
// get the canvas context
var ctx = canvas.getContext("2d");
// draw the preview image on the canvas
ctx.drawImage(preview.getElementsByTagName("img")[0], 0, 0, canvas.width, canvas.height);
// draw the preview text on the canvas
ctx.font = preview.getElementsByTagName("p")[0].style.fontSize + " Arial";
ctx.textAlign = "center";
ctx.fillStyle = "black";
ctx.fillText(preview.getElementsByTagName("p")[0].textContent, canvas.width / 2, canvas.height - (canvas.height / 15));
// get the canvas data URL
var dataURL = canvas.toDataURL("image/png");
// create a link element
var link = document.createElement("a");
// set the link href to the canvas data URL
link.href = dataURL;
// set the link download attribute to the file name
link.download = "featured-image.png";
// append the link to the document body
document.body.appendChild(link);
// click the link
link.click();
// remove the link from the document body
document.body.removeChild(link);
}
</script>
</body>
</html>
Comments