Skip to content

Commit 6d1f9e6

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1951 from Risad212/placeholder-generator
added new project
2 parents df5939b + 4220c16 commit 6d1f9e6

5 files changed

Lines changed: 177 additions & 0 deletions

File tree

‎Projects/placeholder-generator/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# placeholder-generator
2+
Introducing My Simple Placeholder Image Generator!
3+
Easily create custom placeholders for your images! Just upload, hit the generate button get your perfect placeholder. Ideal for designers, developers, and social media enthusiasts! Try it now:
4+
https://palaceholder-image-generator.netlify.app/

‎Projects/placeholder-generator/app.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const fileInput = document.getElementById('fileinput');
2+
const generateButton = document.querySelector('.generateBtn');
3+
4+
5+
/*============ get image dimenstion ===============*/
6+
generateButton.addEventListener('click', event => {
7+
if (fileInput.files.length > 0) {
8+
const img = document.createElement('img');
9+
const selectedImage = fileInput.files[0];
10+
const objectURL = URL.createObjectURL(selectedImage);
11+
12+
img.onload = function handleLoad() {
13+
console.log(`Width: ${img.width}, Height: ${img.height}`);
14+
generateImage(img.height,img.width)
15+
URL.revokeObjectURL(objectURL);
16+
};
17+
18+
img.src = objectURL;
19+
}
20+
21+
fileInput.value = null;
22+
});
23+
24+
25+
26+
/*================ generate placeholder image ===================*/
27+
const imagePreview = document.getElementById("imagePreview");
28+
const downloadImage = document.getElementById('download');
29+
30+
function generateImage(imageHeight,imageWidth) {
31+
const canvasElement = createPlaceholderCanvas(
32+
imageWidth,
33+
imageHeight
34+
);
35+
const dataUrl = canvasElement.toDataURL();
36+
37+
downloadImage.href = dataUrl;
38+
imagePreview.src = dataUrl;
39+
imagePreview.style.display = "block";
40+
imagePreview.style.maxWidth = `${imageWidth}px`;
41+
42+
43+
}
44+
45+
/**
46+
* Creates a HTML canvas element of the given size.
47+
*
48+
* @param {number} width
49+
* @param {number} height
50+
* @returns {HTMLCanvasElement}
51+
*/
52+
function createPlaceholderCanvas(width, height) {
53+
const element = document.createElement("canvas");
54+
const context = element.getContext("2d");
55+
56+
57+
element.width = width;
58+
element.height = height;
59+
60+
// Fill in the background
61+
context.fillStyle = "#aaaaaa";
62+
context.fillRect(0, 0, element.width, element.height);
63+
64+
// Place the text
65+
context.font = "bold 90px sans-serif";
66+
context.fillStyle = "#333333";
67+
context.textAlign = "center";
68+
context.textBaseline = "middle";
69+
context.fillText(`${width}x${height}`, element.width / 2, element.height / 2);
70+
71+
return element;
72+
}
73+

‎Projects/placeholder-generator/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>generate Placeholder image</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
11+
<link rel="stylesheet" href="style.css">
12+
</head>
13+
14+
<body>
15+
16+
<h1 class="title">upload your file generate placeholder image</h1>
17+
18+
<div class="input-wrap">
19+
<h2>upload file here</h2>
20+
<input id="fileinput" type="file" accept="image/*" placeholder="upload image" />
21+
<button class="generateBtn">generate image</button>
22+
</div>
23+
24+
25+
<div class="preview-wrap">
26+
<h3>Preview image</h3>
27+
<img alt="Preview Image" id="imagePreview" style="display: none">
28+
</div>
29+
30+
<a href="#" id="download" download>download image</a>
31+
32+
<script src="app.js"></script>
33+
</body>
34+
35+
</html>

‎Projects/placeholder-generator/style.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
body {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: center;
5+
height: 100vh;
6+
align-items: center;
7+
font-family: 'Poppins', sans-serif;
8+
}
9+
10+
img {
11+
width: 100%;
12+
height: 100%;
13+
margin: auto;
14+
object-fit: cover;
15+
display: block;
16+
margin-bottom: 150px !important;
17+
}
18+
19+
.title {
20+
text-transform: capitalize;
21+
margin-bottom: 15px;
22+
}
23+
24+
#download {
25+
text-decoration: none;
26+
color: #fff;
27+
background: #00AA96;
28+
padding: 20px 25px;
29+
font-size: 19px;
30+
text-transform: capitalize;
31+
display: block;
32+
margin-top: 25px;
33+
}
34+
35+
.generateBtn {
36+
color: #fff;
37+
background: #00AA96;
38+
padding: 16px 25px;
39+
font-size: 19px;
40+
text-transform: capitalize;
41+
display: inline-block;
42+
border: none;
43+
cursor: pointer;
44+
margin-top: 25px;
45+
}
46+
47+
.preview-wrap {
48+
width: 1000px;
49+
height: 250px;
50+
text-align: center;
51+
margin-bottom: 80px;
52+
}
53+
54+
.input-wrap {
55+
text-align: center;
56+
display: inline-flex;
57+
flex-direction: column;
58+
}
59+
60+
input#fileinput {
61+
padding: 60px;
62+
color: #00AA96;
63+
border: 5px dashed #00AA96;
64+
text-align: center;
65+
}

‎img/projects/placeholder-generator.jpg‎

192 KB
Loading

0 commit comments

Comments
 (0)