programming

Javascript: Πώς αποθηκεύουμε τα περιεχόμενα ενός html element σε εικόνα

nc
Δημοσίευση: • Share Article:

@Στον κώδικα που ακολουθεί θα δούμε πώς μπορούμε να αποθηκεύσουμε τα περιεχόμενα οποιουδήποτε dom element του κώδικά μας σε HTML, σε εικόνα png. Θα ξεκινήσουμε τον κώδικα φορτώνοντας το jquery (έκδοση 2.1.1) και το html2canvas (έκδοση 0.4.1). Αφού δημιουργήσουμε ένα element, του δίνουμε το αναγνωριστικό "target" (ή ό,τι άλλο θέλουμε) και γράφουμε ως περιεχόμενο του element ένα απλό κείμενο Lorem ipsum dolor. Στη συνέχεια δημιουργούμε ένα κουμπί ώστε να μπορούμε να αποθηκεύσουμε τα περιεχόμενα του "target" και πληκτρολογούμε τη μέθοδο "takeScreenShot()" (ή όπως αλλιώς θέλουμε να την ονομάσουμε). Στο επόμενο μπλοκ γράφουμε τον κώδικα javascript που μετατρέπει το "target" σε εικόνα. Μόλις εμφανιστεί η εικόνα πατάμε με το δεξί πλήκτρο του mouse και αποθηκεύουμε την εικόνα με την ονομασία που θέλουμε (το format θα είναι σε PNG μορφή).
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div to Image</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"
        integrity="sha512-CwHUCK55pONjDxvPZQeuwKpxos8mPyEv9gGuWC8Vr0357J2uXg1PycGDPND9EgdokSFTG6kgSApoDj9OM22ksw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"
        integrity="sha512-s/XK4vYVXTGeUSv4bRPOuxSDmDlTedEpMEcAQk0t/FMd9V6ft8iXdwSBxV0eD60c6w/tjotSlKu9J2AAW1ckTA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</head>

<style>
    #target {
        width: 300px;
        height: 200px;
        background: rgb(240, 229, 192);
        color: rgb(56, 55, 55);
        padding: 10px;
    }

    button {
        display: block;
        height: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
</style>

<body>

    <div id="target">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem,
        scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante.
        Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim
        posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
    </div>

    <button onclick="takeScreenShot()">to image</button>


    <script>
        window.takeScreenShot = function () {
            html2canvas(document.getElementById("target"), {
                onrendered: function (canvas) {
                    document.body.appendChild(canvas);
                },
                width: 320,
                height: 220
            });
        }
    </script>


</body>

</html>

Foreach programming

Εγγραφείτε για να βλέπετε τα εξειδικευμένα άρθρα.