Erstelle dir deine eigene Dummy Bilder und lade sie herunter
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image placeholder</title>
<style>
body {
margin:5px 5px;
}
h1,
h2,
h3 {
color: red !important;
}
#selType,.input {
font-size: 20px;
text-align: left;
border-radius: 10px;
border: 4px solid #eee;
padding-left:35px;
padding: 10px;
color:grey;
font-weight: 600;
}
#selType{
width:150px;
}
.t1 {
padding: 20px;
font-weight: 700;
font-size: 18px;
color: #009acb;
}
.t2 {
padding-left: 50px;
font-weight: 600;
font-size: 35px;
color: darkgreen;
}
.break {
padding-bottom: 50px;
}
p {
font-size: 18px;
color: grey;
}
#canvasPlaceHolder {
border: 1px solid black;
}
#download {
color: white;
cursor: pointer;
background-color: darkgoldenrod;
border-radius: 10px;
padding: 10px;
transition: .5s;
}
#download:hover {
text-decoration:false;
background-color: red;
transition: .5s;
}
.brandYW {
color: #fff;
cursor: pointer;
font-size: 11px;
transition: 2s;
background-color: #009acb;
padding: 7px;
border-radius: 10px;
float: right;
}
.brandYW:hover{
transition: 2s;
background-color: #046a8a;
text-decoration: none;
color: #fff;
}
#tt{
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 break">
<canvas id="canvasPlaceHolder" width="100" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p>Der Platzhaltergenerator dient zum Generieren von Platzhalterbildern
zur Verwendung in Ihren Webprojekten,
Dummy- oder Mock-up-Projektabläufen,
Medienprojekten als Platzhalter,
bis Sie sie durch die tatsächlichen Bilder ersetzen,
die Sie möglicherweise in Zukunft kaufen.</p>
<p>Bitte geben Sie die Maße des Platzhalterbildes nach Ihren Wünschen ein.</p>
</div>
<div class="row">
<div class="col-lg-3">
<span class="t1">Width:</span>
<input type="text" name="width" id="pWidth" placeholder="Please enter width" class="input">
</div>
<div class="col-lg-3">
<span class="t1">Height:</span>
<input type="text" name="height" id="pHeight" placeholder="Please enter height" class="input">
</div>
<div class="col-lg-3">
<span class="t1">Textfarbe:</span>
<input type="text" name="bc" id="bc" placeholder="zb #fff" value="#fff" class="input">
</div>
<div class="col-lg-3">
<span class="t1">Fontsize:</span>
<input type="text" name="font" id="font" min="5" max="50" value="16" class="input">
</div>
<div class="col-lg-3">
<span class="t1">Hintergrund farbe:</span>
<input type="text" name="hc" id="hc" placeholder="zb #fff" value="#000" class="input">
</div>
<div class="col-lg-3">
<span class="t1">Größe des Dummy Bild auf Bild anzeigen oder eigenen Text:</span>
<input type="checkbox" name="sizean" id="sizean" class="input" checked>
<div class="col-lg-3">
<div id="tt1">
<span class="t1"> Größe:</span>
<input type="text" name="textan" maxlength="12" id="dum" value="" class="input">
</div>
<div id="tt">
<span class="t1"> Text max 12 zeichen:</span>
<input type="text" name="textan" maxlength="12" id="textan" placeholder="hallo..." value="" class="input">
</div>
</div>
</div>
<div class="col-lg-3">
<span class="t1">Name der Bilddatei:</span>
<input type="text" name="fileName" id="fileName" placeholder="Filename" class="input">
</div>
<div class="col-lg-3 break">
<span class="t1">File extension you want:</span>
<select id="selType" name="selType">
<option selected="selected">png</option>
<option>jpg</option>
<option>gif</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-12 break"> <a id="download">Download the image your crafted</a></div>
</div>
</div>
<div class="row">
<div class="col-lg-12"> <a href="http://www.whizlab.in" class='brandYW' alt="Whizlab" title="Whizlab" target="_blank">Crafted by Whizlab</a></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var canvas = document.getElementById("canvasPlaceHolder"),
ctx = canvas.getContext("2d"),
fileName = null,
fileType = null,
_prevFileType = null;
$("#pWidth,#pHeight,#filename,#fileType,#bc,#hc,#textan,#sizean,#font").change(function () {
var _width = $('#pWidth').val();
var _height = $('#pHeight').val();
var bco = $('#bc').val();
var hco = $('#hc').val();
var tea = $('#textan').val();
var _dim = (_width + "X" + _height);
var totalTextLen = 0;
var space = 15;
fontSize =$('#font').val();
var returnFont = (fontSize + 'px' + ' courier');
totalTextLen = (_dim.length / 2) + fontSize + space;
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = _width;
canvas.height = _height;
ctx.fillStyle =hco;// 'silver';
ctx.fillRect(0, 0, _width, _height);
ctx.font = returnFont;
ctx.fillStyle = bco;
if($("#sizean").is(':checked')){
$("#dum").css('display','block').val(_width + ' x ' + _height);
$('#tt').css('display','none');
$('#tt1').css('display','flex');
ctx.fillText(_width + ' x ' + _height, (_width / 2 - (totalTextLen)), (_height / 2 + 5));
}else{
$('#tt').css('display','flex');
$('#tt1').css('display','none');
totalTextLen1 = (tea.length / 2) + fontSize + space;
ctx.fillText(tea, (_width / 2 - (totalTextLen1)), (_height / 2 + 35));
}
ctx.textAlign = "center";
$('#pWidth, #pHeight').bind('keyup paste', function () {
this.value = this.value.replace(/[^0-9]/g, '');
});
$('#fileName').on({
blur: function () {
if ($(this).val().length <= 0) {
fileName = 'placeholder';
fileType = '.png';
}
},
change: function () {
if (_prevFileType == null) {
_prevFileType = 'png';
}
fileName = $('#fileName').val() + '.' + _prevFileType;
}
});
$('#selType').change(function () {
fileType = $(this).val();
_prevFileType = fileType;
if ($("#fileName").val().length > 0) {
fileName = $("#fileName").val() + '.' + _prevFileType;
}
});
if ((_width.length && _height.length && $("#fileName").length > 0)) {
$("#download").show();
} else {
$("#download").hide();
}
$("#canvasPlaceHolder").show();
})
$("#download").hide();
$("#canvasPlaceHolder").hide();
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.download = filename;
}
document.getElementById('download').addEventListener('click', function () {
downloadCanvas(this, 'canvasPlaceHolder', fileName);
}, false);
</script>
</body>
</html>