html2canvas Image in div

Asked

Viewed 520 times

0

I have the following div

<div class="jumbotron" ng-app>
<div class="row">
    <div class="col-md-4">
        <input type="text" ng-model="yourName" placeholder="Seu nome">
        <br />
        <a href="javascript:genScreenshot()"> Get Screenshot</a>
        <a id="test"></a>
    </div>
    <div class="col-md-4">
        <div class="container" id="cont_img" style="position:relative">
            <img src="" id="bn_Fita" style="position:absolute" />
            <img src="" id="bn_Insignia" style="position:absolute" />
            <img src="" id="bn_Marca" style="position:absolute" />
            <div style="position:absolute; top:50px; left:200px; color:white">{{yourName}}</div>
            <br />
            <br />
        </div>
    </div>
</div>

The function genScreenshoot()

    function genScreenshot() {
    html2canvas($('#cont_img'), {
        allowTaint: true,
        letterRendering: 1,
        onrendered: function (canvas) {
            if (navigator.userAgent.indexOf("MSIE ") > 0 ||
                          navigator.userAgent.match(/Trident.*rv\:11\./)) {
                var blob = canvas.msToBlob();
                window.navigator.msSaveBlob(blob, 'Test file.png');
            }
            else {
                $('#test').attr('href', canvas.toDataURL("image/png"));
                $('#test').attr('download', 'Test file.png');
                $('#test')[0].click();
            }

        }
    });
}

But this function is only saving the text, the images within that same div are not being rendered. Remembering that the src they are set when the user chooses an image. And this screenshot function is only called when user clicks the button, so the images are there.

html2canvas

1 answer

-1

I don’t know if this code helps you a little it captures the image I just didn’t put the download function.

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Html2 Canvas</title>

        <!-- Html2Canvas -->

        <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
        <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

        <!-- Leaflet -->
        <link rel="stylesheet" type="text/css" href="http://www.tecnologicbrasil.com.br/leaflet/leaflet.css">
        <script src="http://www.tecnologicbrasil.com.br/leaflet/leaflet.js"></script>

        <!-- CSS Bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

        <!-- Scripts Bootstrap -->

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 


    </head>
    <body>

        <button onclick="prints();" data-toggle="modal" data-target="#exampleModal" >Click para dar print</button>

        <div id="vai" style="width: 30%;height: 500px; background-color: #191919;"><img id="tb" src="img/header.png">
            <h3 id="txt" style="color: #191919; font-size: 1.5em; margin-left: 5%;">Tecnologic Brasil- Inovando a cada Dia</h3></div>


            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">

          <div class="modal-body">

             <div id="img" style="width: 800px;"></div>


          </div>

        </div>
      </div>
    </div>

        <script type="text/javascript">

           function prints(){ 

                document.getElementById("vai").style.borderRadius = "12px";
                document.getElementById("vai").style.width = "470px";
                document.getElementById("tb").style.marginLeft = "20%";
                document.getElementById("txt").style.color = "white";

                html2canvas(document.querySelector("#vai")).then(canvas => {
        document.querySelector("#img").appendChild(canvas)
    });



            }



        </script>

    </body>
    </html>

Browser other questions tagged html2canvas

You are not signed in. Login or sign up in order to post.