Nachdem ich euch gezeigt habe, wie man mit Javascript ein QR Code genieren kann, wurde ich gefragt wie man denn diesen QR Code danach als Bild herunterladen kann. Lustigerweise habe ich ja vor ein paar Wochen dazu ein kleines Projekt gemacht, wo mit man Icons mit Online Font Awesome und Google Icons online generieren kann und auch gleich herunterladen kann (https://iconmagic.app/). So war es für mich auch gar nicht schwer, kurz ein Video zu diesem Thema zu machen.
Video
JS Bibliotheken
Damit das herunterladen von einem HTML / DIV Element funktioniert, muss man 2 zusätzliche JS Librarys installieren und zwar das jQuery und das HTML2Canvas. Bedenkt dabei dass ihr die DSGVO einhalten solltet, sonst werdet ihr abgemacht. Also lädt diese Scripte herunter und baut sie lokal ein – nicht über CDN.
1 2 | <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> |
Hier findet man übrigens mehr Informationen zum html2canvas Script https://html2canvas.hertzen.com/
HTML
Damit JS weiss was er als Bild umwandeln und herunterladen muss, müsst ihr diesen DIV mit einem weiteren DIV ummanteln
1 2 3 | <div id="bild">
<div id="output"></div>
</div> |
Denkt auch daran, dass wenn ihr dieses DIV stylen wollt, dann macht das direkt im DIV und nicht im CSS Bereich
1 | <div style="display:grid; place-content:center; background-color: #C70039; font-size:3rem; color:#FFC300; height: 200px; width: 200px">hello</div> |
Download-Link
Natürlich müsst ihr noch ein Download „Button“ erstellen
1 | <a id="download">Double Click for Download</a> |
Body
Vergesst auch nicht den Body Tag auf autoClick umzuwandeln.
1 | <body onload="autoClick();"> |
JS
Das hier ist der Javascript Code mit dem der ganze Spass gemacht wird. Denkt daran wenn ihr andere ID’s nehmt müsst ihr die hier auch anpassen. #download ist die ID des Downloadbuttons und #bild ist des ummantelndes DIVs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script type="text/javascript">
$(document).ready(function() {
var element = $("#bild");
$("#download").on('click', function() {
html2canvas(element, {
onrendered: function(canvas) {
var imageData = canvas.toDataURL("image/png");
var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#download").attr("download", "image.png").attr("href", newData);
}
});
});
});
</script> |
0 Kommentare