Question

在按钮上单击画布或画布上的文本消失，我不确定。

这是用于填充画布的脚本

<script>
        window.onload = function () {
            $("#show_img_btn").on("click", function () {
                var can = document.createElement("canvas");
                can.width = 500;
                can.height = 500;
                var cvs = can.getContext('2d');
                cvs.font = "20px Arial";
                var text = $("#the_text").text();
                var text2 = $("#div_position").text();
                cvs.fillText(text, 10, 50);
                cvs.fillText(text2, 20, 70);
                var img = document.createElement("img");
                img.src = can.toDataURL();
                $("#show_img_here").append(img);
            });
        };
</script>

这是我要转换为图片的文字

<div id="the_text">
    &nbsp;<asp:Label ID="lblfirstname" runat="server" Text="First Name" Font-Names="Arial" Font-Bold="true"></asp:Label>
    <asp:Label ID="lbllastname" runat="server" Text="Last Name" Font-Names="Arial" Font-Bold="true"></asp:Label>
    <br />
    <br />
</div>
<div id="div_position" runat="server">
    <asp:Label ID="lblposition" runat="server" Font-Names="Arial" ForeColor="#0099FF" Text="Position"></asp:Label>
</div>
<div id="show_img_here" runat="server">
</div>

这是我点击转换为图片的按钮

 <asp:Button ID="show_img_btn" runat="server" Text="Create Image" />

Answer 1

将功能名称更改为DisplayImage()

$("#show_img_btn").on("click", function DisplayImage()

在函数结束时返回false

return false;

点击按钮事件

<input id="show_img_btn" type="button" value="Create Image" onclick="DisplayImage();" />

按钮单击

1 个答案: