Click here to Skip to main content
15,920,896 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i want to pass captured image by webcam from modal popup page to parent page on image control. everything is working fine but when i pass image, image is appearing on image control but while save time its value showing null.

i try to method
1) in this method i have call captuteimage.aspx page as a popup page in this method image is passing from captureimage.aspx page to parent page. but image value showing me null while saving

2) in this method i have use bootstrap modal popup to capture image crop and upload process. in this method image capturing but when i press crop button the modal popup close automatically and not allow me to do rest process like crop and upload.
i have use same code in modal to pass image from modal popup to parent page but on crop button click its close itself...

i have search many articles but still not done please help me to resolve this..
thanks in advance...

What I have tried:

child page captureimage.aspx pass image code

function passDetails() {
    if (window.opener != null && !window.opener.closed) {
        var vImage = window.opener.document.getElementById("vImage");

parent page code for access image.
        function myFunction() {
            var url = "/captureimage.aspx";
            var s =, 'popup_window', 'width=900,height=500,left=200,top=100,resizable=no');
            ClientScript.RegisterStartupScript(this.GetType(), "script", s, true);
        function SetSource(src) {
            document.getElementById("vImage").src = src;
            //document.getElementById("vimagehidden").value = src;

this is my modal popup code...
<div class="modal fade" id="exampleModal" data-index="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-keyword="false" data-backdrop="static">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header text-center">
                                    <div class="mx-auto">
                                        <h6 class="modal-title text-center" id="exampleModalLabel">Capture Image</h6>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                <div class="modal-body">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <div id="webcam" style="height: 240px; width: 320px;"></div>
                                                    <div class="form-group text-center">
                                                        <%--<asp:Button ID="btnCapture" runat="server" Text="Capture" CssClass="btn btn-success" />--%>
                                                        <input type="button" id="btnCapture" value="Capture" class="btn btn-success" />

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <asp:Image ID="imgCapture" runat="server" Height="240" Width="320" />
                                                            <asp:HiddenField ID="X" runat="server" />
                                                            <asp:HiddenField ID="Y" runat="server" />
                                                            <asp:HiddenField ID="W" runat="server" />
                                                            <asp:HiddenField ID="H" runat="server" />
                                <div class="modal-footer">
                                <div class="form-group text-center">
                                    <%--<input type="button" id="btnCrop" value="Crop" class="btn btn-success" />--%>
                                    <asp:Button ID="btnCrop" runat="server" Text="Crop" CssClass="btn btn-success" OnClick="btnCrop_Click" />
                                    <asp:Button ID="btnUpload" runat="server" Text="Upload" CssClass="btn btn-success" OnClientClick="passDetails();" />
Updated 11-Mar-22 23:11pm

1 solution

I think you want to do client side cropping so notice the difference look at OnClick vs OnClientClick events.

Second guess is, your 'save time' code is not awaiting for something (asynchronous coding issue).

Third guess. Whatever 'save time' means, you are not serializing the image and an object reference is just skipped by your save routine
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900