从文本框值生成条形码图像

I am using JsBarcode

我正在使用JsBarcode

I am trying to display a barcode image which was generated from textbox's value.

我正在尝试显示从文本框的值生成的条形码图像。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="JsBarcode.all.js"></script>
    <script>
        function textToBase64Barcode(text) {
            var canvas = document.createElement("canvas");
            JsBarcode(canvas, text, { format: "CODE39" });
            return canvas.toDataURL("image/png");
        }
        function getBarcode() {
            var input = document.getElementById('<%= txtInput.ClientID %>').value;
            document.getElementById("image").setAttribute("src", textToBase64Barcode(input));
        }
  </script>
</head>
<body>
    <form id="form1" runat="server">
        <img id="image" />
        <br />
        <asp:TextBox ID="txtInput" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="btnSubmit" runat="server" Text="Show Barcode" OnClientClick="getBarcode()" />
        <br />   
    </form>
</body>
</html>

Problem I have is that the Barcode appears and disappear right away. How do I:

我遇到的问题是条形码会立即出现并消失。我如何能:

Keep the image barcode appearing on the page

保持图像条形码出现在页面上

Retrieve the image Base64 value in the code behind (so I can save it to a database)

在后面的代码中检索图像Base64值(所以我可以将它保存到数据库中)

2 个解决方案

#1

The barcode dissapears because when the button is clicked the page performs a postback, even if there is no action associated with the button. You could disable the button but you won't get the base64 string of the barcode in code behind.

条形码消失,因为当单击按钮时,即使没有与按钮关联的操作,页面也会执行回发。您可以禁用该按钮,但不会在后面的代码中获取条形码的base64字符串。

So you could do something like this:

所以你可以这样做:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" src="JsBarcode.all.js"></script>
    <script type="text/javascript" >
        function textToBase64Barcode(text) {
            var canvas = document.createElement("canvas");
            JsBarcode(canvas, text, { format: "CODE39" });
            return canvas.toDataURL("image/png");
        }
        function getBarcode() {
            var input = document.getElementById('<%= txtInput.ClientID %>').value;
            document.getElementById("image").setAttribute("src", textToBase64Barcode(input));

            //set the base64 value in a hiddenfield so the code-behind can process it on postback
            document.getElementById('<%= HiddenField1.ClientID %>').value = textToBase64Barcode(input);
        }
  </script>
</head>
<body>
    <form id="form1" runat="server">
        <img id="image" />
        <br />
        <asp:TextBox ID="txtInput" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="btnSubmit" runat="server" Text="Show Barcode" OnClientClick="getBarcode()" OnClick="btnSubmit_Click" />
        <br />

        <!-- hiddenfield containing the base64 value -->
        <asp:HiddenField ID="HiddenField1" runat="server" />

    </form>
</body>
</html>

And in the code behind:

并在代码背后:

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        //you can now do something with the base64 value
        string base64 = HiddenField1.Value;

        //call the javascript code when the postback is done so the barcode is generated again
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "reloadBarcode", "getBarcode()", true);
    }

2 个解决方案

#1

更多相关文章

随机推荐