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

【问题标题】：Generate Barcode image from Textbox value从文本框值生成条形码图像
【发布时间】：2016-07-28 14:15:25
【问题描述】：

我正在使用JsBarcode

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

<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>

我遇到的问题是条形码会立即出现和消失。我该怎么做：

保持图片条形码显示在页面上
在后面的代码中检索图像 Base64 值（以便我可以将其保存到数据库中）

【问题讨论】：

将 javascript 移动到表单之后，以便在所有元素都到位时运行
我将那些 <script>...</script> 移到 <form> 之后，它仍然做同样的事情 - 出现后立即消失

标签： javascript c# jquery asp.net webforms

【解决方案1】：

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

所以你可以这样做：

<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>

在后面的代码中：

    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】：

如果您还没有找到解决方案，您只需在您的OnClientClick 中添加一个return false; 以防止PostBack

<asp:Button ID="btnSubmit" runat="server" Text="Show Barcode" OnClientClick="getBarcode(); return false;" />

【讨论】：