Html2Canvas 并一键保存

Question

我有一个网络表单，它根据表单中的数据创建邮件签名。我使用“html2canvas”获取该签名的屏幕截图并将该图像下载到我的计算机。 但我可以用两个按钮（btnPreview 和 btnExport）和两个 javascript 函数来做到这一点。我怎样才能只用一个按钮点击来完成这个过程？换句话说，我怎样才能一键同时执行 html2canvas 和保存进程？

我在下面添加了我的代码 sn-p。你能帮我解决这个问题吗？？

提前致谢。

    <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>

Answer 1

试试这个代码：

 $("#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);
                        }
                    });
    });

我试图捕捉元素而不是 document.body，但屏幕截图没有任何样式（css）。 这就是我捕获所有document.body的原因