html2canvas Image on div

Question

html2canvas Image on div

Navigation

#1 by (0 votes)

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 inside that same div are not being rendered. Remembering that% of% 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

asked by anonymous 16.01.2018 / 14:38

1 answer

Error: Could not resolve type with token 01000041 Pass login credentials and password for report service

score 0 · Answer 1

I do not know if this code helps you a little, it captures the image and I just did not 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><scripttype="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script><!--Leaflet--><linkrel="stylesheet" type="text/css" href="http://www.tecnologicbrasil.com.br/leaflet/leaflet.css">
        <script src="http://www.tecnologicbrasil.com.br/leaflet/leaflet.js"></script><!--CSSBootstrap--><linkrel="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>