Create solid background Gif image in ASP.Net using C# and VB.Net

Hi Tevin,

Refer below code.

HTML

<div class="panel-body">
    <div class="col-xs-5">
        <label for="favcolor">Select Color:</label>
        <%--<input type="color" runat="server" class="form-control" id="txtColor" value="#ff0000"><br>--%>
        <asp:HiddenField ID="hfImageData" runat="server" />
        <asp:TextBox ID="txtColors" type="color" placeholder="enter color name" value="#ff0000" runat="server" CssClass="form-control" />
        <br />
        <asp:Label ID="lblColorName" CssClass="control-label" Font-Bold="true" runat="server" Text="Color Name:"></asp:Label>
        <asp:TextBox ID="txtColorName" Width="100%" placeholder="enter color name" runat="server" CssClass="form-control" />
        <asp:RequiredFieldValidator ID="ReqFieldValtxtColorName" Font-Bold="true" ForeColor="Red" Display="Dynamic" SetFocusOnError="true"
            ControlToValidate="txtColorName" runat="server" ErrorMessage="enter color name"></asp:RequiredFieldValidator>
        <br />
        <div style="text-align: right;">
            <asp:Button ID="btnSaveClaim" Width="90px" CausesValidation="True" runat="server" Text="Save Color" CssClass="btn btn-md btn-primary"
                OnClick="ExportToImage" OnClientClick="return ConvertToImage(this)" />
        </div>
    </div>
    <br />
    <div class="col-xs-4">
        <asp:Table runat="server" BackColor="#ff0000" HorizontalAlign="Right" ID="tblColor" Height="200px" Width="200px">
        </asp:Table>
    </div>
    <div class="col-xs-4">
    </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#txtColors').on('change', function () {
            $('#tblColor')[0].style.backgroundColor = $(this).val();
        });
    });

    function ConvertToImage(btnExport) {
        html2canvas($('[id*=tblColor]')[0], {
            onrendered: function (canvas) {
                var base64 = canvas.toDataURL();
                $("[id*=hfImageData]").val(base64);
                __doPostBack(btnExport.name, "");
            }
        });
        return false;
    }
</script>

Code

C#

protected void ExportToImage(object sender, EventArgs e)
{
    string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
    byte[] bytes = Convert.FromBase64String(base64);
    Response.Clear();
    Response.ContentType = "image/png";
    Response.AddHeader("Content-Disposition", "attachment; filename=HTML.gif");
    Response.Buffer = true;
    Response.Cache.SetCacheability(HttpCacheability.NoCache);
    Response.BinaryWrite(bytes);
    Response.End();
}

VB.Net

Protected Sub ExportToImage(ByVal sender As Object, ByVal e As EventArgs)
    Dim base64 As String = Request.Form(hfImageData.UniqueID).Split(","c)(1)
    Dim bytes As Byte() = Convert.FromBase64String(base64)
    Response.Clear()
    Response.ContentType = "image/png"
    Response.AddHeader("Content-Disposition", "attachment; filename=HTML.gif")
    Response.Buffer = True
    Response.Cache.SetCacheability(HttpCacheability.NoCache)
    Response.BinaryWrite(bytes)
    Response.End()
End Sub