如何将html网页作为屏幕截图并将其作为图像发送到邮件

how to take a html webpage as a screenshot and send as a image to mail

本文关键字：图像 屏幕截图 html 网页      更新时间：2023-09-26

我只想在单击确认按钮时将我的html网页作为屏幕截图发送到电子邮件，这样客户端就可以将整个网页作为图像。我是java脚本的新手。我尝试了很多方法，但对我来说都不正确。任何建议都是可观的，对我很有帮助，我正在使用以下代码。。。。。

     <div class="container" style="padding-top: 15px;">
     <div id="site">
     <form action="cart.php" method="post" id="" >
     <table><tr>
     <div id="content">
    <td>
        <form action="" method="post" id="checkout-order-form" style="margin-top: 50px;">
        <h2>Confirm Your Details</h2>
            <fieldset id="fieldset-shipping">
                <div class="form-group col-md-6" style="padding-left: 15px;width:330px;">
                    <input type="text" name="Name" id="Name" class="form-control" required="required" placeholder="Name">
                </div>
                <div class="form-group col-md-6">
                    <input type="tel" pattern="^+91'd{4}'d{3}'d{3}$"  id="phone" name="phone" class="form-control" required="required" placeholder="Contact Number" style="width: 176px;">
                </div>
                <table>
                    <tr><td style="padding-bottom: 118px;">
                        <table>
                            <tr><td>
                                <div class="form-group col-md-12">
                                    <input type="text" name="Business" id="Business" class="form-control" required="required" placeholder="Business Name / Company Name" style="width: 296px;">
                                </div>
                            </td></tr>
                            <tr><td>
                                <div class="form-group col-md-6">
                                    <input type="email" name="Email"  id="Email" class="form-control" required="required" placeholder="Email" style="width: 296px;height: 34px;">
                                </div>
                            </td></tr>
                             <tr><td>
                           </td></tr>
                            <tr><td>
                                <div class="form-group col-md-4"style="width: 150px; padding-left: 20px; margin-left: 20px;">
                                    <textarea name="productid" id="productid" class="form-control" required="required" placeholder="Product Id" style="width: 121px;height: 78px;"></textarea>
                                </div>
                                <div class="form-group col-md-4"style="width: 155px; padding-left: 35px;">
                                <textarea name="Productquantity" id="Productquantity" class="form-control" required="required" placeholder="Qty" style="width: 71px;height: 78px;"></textarea>
                          </div>
                       </td></tr>
                        </table>
                        </td>
                        <td style="padding-bottom: 170px;">
                            <div class="form-group col-md-6" style="height: 200px;width: 530px;padding-left: 5px;">
                                <textarea name="Shippingaddress" id="Shippingaddress" class="form-control"rows="5" placeholder="Shipping Address" required="required" style="height: 199px;width: 326px;margin-left: 0px;"></textarea>
                            </div> 
                        </td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </td>
    <td></td>
          <form action="cart.php" method="post" class="last">
            <fieldset>
                <input type="hidden" name="business" value="info@domain.com" />
                <input type="hidden" name="cmd"  value="_cart" />
                <input type="hidden" name="display" value="1" />
                <input type="hidden" name="return" value="http://www.minicartjs.com/?success" />
                <input type="hidden" name="cancel_return" value="http://www.minicartjs.com/?cancel" />
                <input type="image" name="submit" value="Click here to edit / cancel Items in your cart" class="button" style="margin-left: 750px;"/>
            </fieldset>
        </form>
    </td>
</div>
</tr>
</table><p><input type="submit" id="submit-order" value="Confirm Order" class="btn" /></p></form>
</div>
</div>  
  <script>
   // Mini Cart
 paypal.minicart.render({
        action: 'cart.php' 
    });
    if (~window.location.search.indexOf('reset=true')) {
        paypal.minicart.reset();
    }
</script>

要将页面另存为图像，可以使用http://html2canvas.hertzen.com/

示例：

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
相关文章：