WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

HTML Element als Bild herunterladen

von | Okt 5, 2022 | Allgemein | 0 Kommentare

Schlagwörter: Javascript

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

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert