Passing Image back to previous page and putting on another image

Question

User-1994446809 posted

How do people add QR code image on their ID card images before printing?

Because I was trying to add a QR code on an ID card image on my web form for printing.

This is the web form which a pre-designed ID is uploaded:

Upload.aspx

<asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Names="Candara" Font-Size="Medium" Text="Authentication Confirmation: This Card is Authentic" ForeColor="#006600"></asp:Label>
            <table class="auto-style2" border="1" style="margin:0 auto">
                <tr>
                    <td class="auto-style3">&nbsp;&nbsp; Select and Upload Your File
                        <asp:FileUpload ID="FileUpload1" runat="server" Height="43px" Width="282px" onchange="ImagePreview(this);" />
                    &nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style4">
                        <asp:Image ID="Image1" runat="server" Height="40px" Width="109px" />
                        <asp:Image ID="Image2" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td class="auto-style5">
                        <asp:Button ID="Button1" runat="server" BackColor="#009933" CssClass="btn btn-success" Text="Generate QR Code" Width="275px" Height="50px" OnClick="Button1_Click1" />
                    </td>
                </tr>
            </table>
            <br />
            <asp:Label ID="msglbl" runat="server"></asp:Label>
        </div>

Then, after uploading and clicking the button to generate QR code; a QR code will be generated for the entire web page which will show the web page contents (on another redirected web page) upon scan.

Upload.aspx.cs

using System.Web.UI;
using System.Web.UI.WebControls;
using MessagingToolkit.QRCode.Codec.Data;
using MessagingToolkit.QRCode.Codec;
using System.Drawing;
using System.Drawing.Imaging;

public partial class Upload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindImage1();
        }
        if (!IsPostBack)
        {
            BindDetailsView(Label2.Text);
            BindDetailsView(Image2.ImageUrl);
        }
    }

    private void BindImage1()
    {
        Image1.DataBind();
    }

    private void BindDetailsView(string id)
    {
        Label2.DataBind();
        Image2.DataBind();
    }

    protected void Button1_Click1(object sender, EventArgs e)
    {

        QRCodeEncoder encoder = new QRCodeEncoder();
        Bitmap bi = encoder.Encode(https://mysite.com/QRGenerate.aspx);
        bi.Save(Server.MapPath("~/images/newqr.jpg"), ImageFormat.Jpeg);
        //Image4.ImageUrl = "~/images/newqr.jpg";
        Response.Redirect("QRGenerate.aspx");
    }
}

Finally, if the user clicks on the finish button on the QRGenerate page it should redirect back to the previous page where the ID card image was uploaded, and add the QR to the uploaded ID card image. (I tried to add an image on top of another as shown in the yellow highlighted area pf the first code). 

QRGenerate.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using MessagingToolkit.QRCode.Codec.Data;
using MessagingToolkit.QRCode.Codec;
using System.Drawing;
using System.Drawing.Imaging;
public partial class QRGenerate : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDetailsView(Image1.ImageUrl);
        }
        QRCodeEncoder encoder = new QRCodeEncoder();
        Bitmap bi = encoder.Encode("https://mysite.com/AcustomID.aspx");
        bi.Save(Server.MapPath("~/images/newqr.jpg"), ImageFormat.Jpeg);
        Image1.ImageUrl = "~/images/newqr.jpg";
        Response.Write(Request.Form.GetType ());
    }
    private void BindDetailsView(string id)
    {
        Image1.DataBind();
    }

    protected void qrgenerator_Click(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindImage1();
        }
        Response.Redirect("Upload.aspx");
    }
         private void BindImage1()
    {
        Image1.DataBind();
    }
}

The desired result is not working. I really need to know how this can be done. If there is another way to get the desired result, I will love to know. 

Answer 1

User753101303 posted

Hi,

See https://dzone.com/articles/css-position-relative-vs-position-absolute ie you have a "container" uses and child images using . By default they'll be both placed at the upper left corner of the parrent container and you can use top, bottom, left, right to change where the 2nd smaller image is "anchored".

Ah https://www.w3schools.com/howto/howto_css_image_text.asp shows that with trext but this is the same principle.

For "passing back the image" usually you are using a primarry key id to identify each row from a column (here maybe the id card for which you uploaded the image) and you'll pass this id so that the other page knows which info/image should be loaded rather than really passing the image itself.

Answer 2

User1535942433 posted

Hi georgeakpan233,

Accroding to your description and codes,I'm guessing that you want to upload person information and need to generate QR code  image of person.Then you could return to the upload page,post image and show it in the upload page.As far as I think,you could use session image.

More details,you could refer to below codes:

upload.page.cs:

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindImage1();
                BindDetailsView(Label2.Text);
                BindDetailsView(Image2.ImageUrl);
                if (Session["image"] != null)
                {
                    Image4.ImageUrl = Session["image"].ToString();
                }
            }
           
        }

QRGenerate.aspx.cs:

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindDetailsView(Image1.ImageUrl);
            }
            QRCodeEncoder encoder = new QRCodeEncoder();
            Bitmap bi = encoder.Encode("https://mysite.com/AcustomID.aspx");
            bi.Save(Server.MapPath("image/image5.jpg"), ImageFormat.Jpeg);
            Image1.ImageUrl = "image/image5.jpg";
            Session["image"] = Image1.ImageUrl;
            Response.Write(Request.Form.GetType());
        }

Result:

Best regards,

Yijing Sun

Answer 3

User-1994446809 posted

Thank you Yij, I have seen the output. I really appreciate your response. It will help me a lot, but I want to have the QR display in a small size on the uploaded image. It's like having a QR code on an ID card before printing. Thank you very much

Answer 4

User-1994446809 posted
Thank you Patrice,
I am totally grateful for this. Though I am yet to try it out but I am sure, from the link I visited, that it will go a long way to achieve the desired goal. Thank you very much.
-Donald