Dummy Bilder erstekllen

Erstelle dir deine eigene Dummy Bilder und lade sie herunter

Der hier verwendete 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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!