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

I just want my html webpage to be sent to email as a screen shot when I click confirm button, so that the client can have the total webpage as a image. I am new to java script. I tried in many ways but its not working for me correctly. Any suggestion is appreciable and it is very helpful for me, I am using the below code.....

     <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="[email protected]" />
                <input type="hidden" name="cmd"  value="_cart" />
                <input type="hidden" name="display" value="1" />
                <input type="hidden" name="return" value="/?success" />
                <input type="hidden" name="cancel_return" value="/?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>

     <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="[email protected]" />
                <input type="hidden" name="cmd"  value="_cart" />
                <input type="hidden" name="display" value="1" />
                <input type="hidden" name="return" value="http://www.minicartjs./?success" />
                <input type="hidden" name="cancel_return" value="http://www.minicartjs./?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>

Share Improve this question asked Jul 2, 2015 at 7:44 sandy 311 silver badge4 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

To save a page as an image, you can use http://html2canvas.hertzen./

Example:

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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745439202a4627752.html

javascript - how to take a html webpage as a screenshot and send as a image to mail - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - how to take a html webpage as a screenshot and send as a image to mail - Stack Overflow

1 Answer 1

相关推荐