Html2Canvas and Save it with only one click

Question

I have a web form that creates a mail signature according to the datas from the form.And i get screenshot of that signature with "html2canvas" and download that image to my computer. But i can do that with two buttons(btnPreview and btnExport) and two javascript functions.How can i do that processes with only one button click?In other words, how can i do html2canvas and saving processes at the same time with one click?

I have added my code snippet below.Can you help me about that issue??

Thanks in advance.

    <div style="float: left;margin-left:5px;">
 <asp:updatepanel runat="server">
 <ContentTemplate>
           <asp:Button ID="btnPreview" class="btn btn-primary" Text="Preview" runat="server"/>      
     </ContentTemplate>
     </asp:updatepanel>
            </div>
        <div style="float: left;margin-left:5px;margin-top:5px;">
         <a id="btnExport" href="#">Save as Image</a>                
            </div>
            <p /><br />
    <h3>Preview :</h3>
    <div id="previewImage">
    </div>

<script type="text/javascript">
       $(document).ready(function () {

           var element = $("#divSignature"); // global variable
           var getCanvas; // global variable

           $("#btnPreview").on('click', function () {
               html2canvas(element, {
                   onrendered: function (canvas) {
                       $("#previewImage").append(canvas);
                       getCanvas = canvas;
                   }
               });
           });

           $("#btnExport").on('click', function () {
               var imgageData = getCanvas.toDataURL("image/png", 1.0);
               // Now browser starts downloading it instead of just showing it
               var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
               $("#btnExport").attr("download", "imza.png").attr("href", newData);
           });

       });

    </script>

score 0 · Answer 1 · answered Feb 27 '18 at 06:29

Try this code:

 $("#btnExport").on('click', function () {
     window["html2canvas"](document.body, {
           onrendered: (canvas) => {
            dataSrc = canvas.toDataURL("image/png");
            dataSrc = dataSrc.replace("data:image/png;base64,","");
            $("#btnExport").attr("download", "imza.png").attr("href", dataSrc);
                        }
                    });
    });

I tried to catch the element instead the document.body but the screenshot was without any style(css). that the reason why I catch all the document.body

It works but i need to click twice.Why cant i do that with only one click? — Hasan Veli, Feb 27 '18 at 06:37

Html2Canvas and Save it with only one click

1 Answers1