locked
Display entire web page content in QR code RRS feed

  • Question

  • User-1994446809 posted

    I am facing issues in my project to generate QR Code for an entire web page and display that QR code on another web page, without having to include a textbox from where the QR will be generated.

    I have two web forms in my project (Upload and QRGenerate). The upload web form is for users to upload images and display, using this code:

    Upload.aspx

    <head runat="server">
       <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
        <title>Upload</title>
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/StyleSheet.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    
        <script type="text/javascript">
            function ImagePreview(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('#<%=Image1.ClientID%>').prop('src', e.target.result)
                        .width(250)
                        .height(250);
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
    <table class="auto-style2" border="1">
                    <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" />
                        </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>
    

    After displaying the uploaded image, the button below the uploaded image is supposed to generate QR Code for the whole current web page and its contents and the QR code will be displayed on another redirected web page.

    Upload.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 Upload : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindImage1();
            }
        }
    
        private void BindImage1()
        {
            Image1.DataBind();
        }
        protected void Button1_Click1(object sender, EventArgs e)
        {
    
            QRCodeEncoder encoder = new QRCodeEncoder();
            Bitmap bi = encoder.Encode(Image1.ImageUrl);
            bi.Save(Server.MapPath("~/images/newqr.jpg"), ImageFormat.Jpeg);
            //Image4.ImageUrl = "~/images/newqr.jpg";
            Response.Redirect("QRGenerate.aspx");
        }
    }

    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("Upload.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();
        }
    }

    The outcome is that the QR Code generated is for the web page address. It does not display the whole web page, it only displays “Upload.aspx”. But I want it to display the entire web page and its content upon scanning the QR code. Please how do I do this?

    George A.

    Saturday, May 9, 2020 7:28 PM

Answers

  • User753101303 posted

    Hi,

    The total size is limited: https://en.wikipedia.org/wiki/QR_code#Storage and a QR code reader would likely just show HTML markup. The usual approach is to encode the full address of a web page ie something such as:

    Bitmap bi = encoder.Encode("https://mysite.com/Upload.aspx");
     

    The QR code reader sees the http/https prefix for the decoded text and will suggest to navigate to this address.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 9, 2020 9:34 PM
  • User753101303 posted

    The link I posted shows that you can store at most 2,953 characters . Also what I doubt a QR Code would allow to render "raw" HTML markup.. Instead you usually encode the full url of a web page, the screen reader will recognize this is a web address and will allow to navigate to this page using the browser and the target location can render whatever you want no matter how complex it is.

    Edit; for example if you want to play a video, you obvisouly couldn't encode a full video using a Qr code. Instead you'll encode the url (with possibly an id parametter) of the page that plays this video.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, May 10, 2020 8:32 AM

All replies

  • User753101303 posted

    Hi,

    The total size is limited: https://en.wikipedia.org/wiki/QR_code#Storage and a QR code reader would likely just show HTML markup. The usual approach is to encode the full address of a web page ie something such as:

    Bitmap bi = encoder.Encode("https://mysite.com/Upload.aspx");
     

    The QR code reader sees the http/https prefix for the decoded text and will suggest to navigate to this address.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 9, 2020 9:34 PM
  • User-1994446809 posted

    Hi,

    Thank you. May I please ask what you mean by this?

    The total size is limited and a QR code reader would likely just show HTML markup.

    If that would be an issue in displaying the full contents of the web page, what should I do to resolve it?

    Sunday, May 10, 2020 7:03 AM
  • User753101303 posted

    The link I posted shows that you can store at most 2,953 characters . Also what I doubt a QR Code would allow to render "raw" HTML markup.. Instead you usually encode the full url of a web page, the screen reader will recognize this is a web address and will allow to navigate to this page using the browser and the target location can render whatever you want no matter how complex it is.

    Edit; for example if you want to play a video, you obvisouly couldn't encode a full video using a Qr code. Instead you'll encode the url (with possibly an id parametter) of the page that plays this video.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, May 10, 2020 8:32 AM
  • User-1994446809 posted
    Thank you
    Sunday, May 10, 2020 1:30 PM