Load/Download Image from URL Using JQuery and Bootstrap in Asp.net C# and VB.NET

watch_later Friday, February 1, 2019
comment 1 Comment

Introduction


This article gives an explanation about how to load and download Image from URL Using jQuery and Bootstrap in Asp.net C# and VB.NET.

In my Previous article, I explained how to Blink HTML Div Tag Using JQuery and Bootstrap JQuery Multiselect Dropdown List With Checkbox in ASP.NET Using C# And VB.NET and Export JSON Data to Excel/CSV File using AngularJs With Bootstrap and AngularJs Table with Bootstrap 4 in ASP.NET Web Forms and many other interesting articles, in this article I gonna share with you how you can Display/Load Image in Picture Box from URL as input using jquery and bootstrap in asp.net using c# and vb.net.

Requirement


1) Design a web form with required label textbox, Picture box, and button.
2) Write a jquery script to load an image from URL.
3) On click of "Load Image" button Load image based on Input URL and render an image in PictureBox.
4) On click of "Download Image" download rendered image from URL.

Implementation


So, Let's Start with a simple example for demonstration. First of all, we will write following JQuery script to load an image but before that, you need to link the latest bootstrap and Jquery library with your application, you just have to write following code before end <head> tag.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
Now, we will write following JQuery script to load an image

JQuery Script

<script type="text/javascript">
    $(function () {
        $('#btnLoadImage').click(function () {
            $("#MyImage").attr("src", $("#txtInputUrl").val());
        })
    })
</script>
Here, #btnLoadImage indicate Id of "Load Image" button, #MyImage indicates Id of PictureBox and "#txtInputUrl" indicates id of My Input Textbox.

Now, Let's Write following code in your aspx file.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="CS" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Load/Download Image From URL Using Jquery and Bootstrap 4</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <div class="card">
                <div class="m-md-4 m-4 m-lg-4">
                    <div class="form-group">
                        <h1 class="text-center align-content-md-center">&nbsp;</h1>
                        <h1 class="text-center align-content-md-center">Load/Download Image From URL in ASP.NET</h1>
                    </div>

                    <div class="form-group">
                        <asp:Image ID="MyImage" CssClass="text-center align-content-center img-thumbnail" runat="server" />
                    </div>
                    <div class="form-group">
                        <asp:Label ID="Label1" runat="server" Text="Image URL :"></asp:Label>
                    </div>
                    <div class="form-group">
                        <asp:TextBox ID="txtInputUrl" plashholder="www.codingvila.com/logo.png" CssClass="form-control form-text" runat="server"></asp:TextBox>
                    </div>
                    <div class="form-group">
                        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            <ContentTemplate>
                                <asp:Button ID="btnLoadImage" CssClass="btn btn-outline-primary" runat="server" Text="Load Image" />
                                <asp:Button ID="btnDownload" CssClass="btn btn-outline-primary" runat="server" Text="Download Image" OnClick="btnDownload_Click" />
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </div>

                </div>
            </div>
            <br />

        </div>
    </form>
    <script type="text/javascript">
        $(function () {
            $('#btnLoadImage').click(function () {
                $("#MyImage").attr("src", $("#txtInputUrl").val());
            })
        })
    </script>
</body>
</html>
Then after you need to write following code in the code-behind.

C#

using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Net;


public partial class CS : System.Web.UI.Page
{
    public void SaveImage(string filename, ImageFormat format, String URL)
    {
        WebClient _client = new WebClient();
        Stream _stream = _client.OpenRead(URL);
        Bitmap _bitmap = new Bitmap(_stream);
        if (_bitmap != null)
            _bitmap.Save(filename, format);
        _stream.Flush();
        _stream.Close();
        _client.Dispose();
    }
    protected void btnDownload_Click(object sender, EventArgs e)
    {
        string rootPath = Server.MapPath(@"~\Image\abc.png");
        SaveImage(rootPath, ImageFormat.Png, txtInputUrl.Text.Trim());
    }
}

VB.NET

Imports System.Net
Imports System.IO
Imports System.Drawing
Imports System.Drawing.Imaging

Partial Class VB
    Inherits System.Web.UI.Page
    Public Sub SaveImage(ByVal filename As StringByVal format As ImageFormatByVal URL As String)
        Dim _client As WebClient = New WebClient()
        Dim _stream As Stream = _client.OpenRead(URL)
        Dim _bitmap As Bitmap = New Bitmap(_stream)
        If _bitmap IsNot Nothing Then _bitmap.Save(filename, format)
        _stream.Flush()
        _stream.Close()
        _client.Dispose()
    End Sub

    Protected Sub btnDownload_Click(sender As Object, e As EventArgsHandles btnDownload.Click
        Dim rootPath As String = Server.MapPath("~\\Image\\abc.png")
        SaveImage(rootPath, ImageFormat.Png, txtInputUrl.Text.Trim())
    End Sub
End Class

Output


Summary


This article gives an explanation about how to load and download the image from URL in asp.net using jquery and bootstrap.

If you know any other efficient way to load and download the image from URL then please let me know. Thank you.

Codingzee provides articles and blogs on web and software development for beginners as well as free Academic projects for final year students in Asp.Net, MVC, C#, Vb.Net, SQL Server, Angular Js, Android, PHP, Java, Python, Desktop Software Application and etc.

avatar

Awesome blog...this is very very helpful...i found your blog after wasting lot of time. now solution got completely.

delete May 16, 2021 at 12:10 AM

Thank you for your valuable time, to read this article, If you like this article, please share this article and post your valuable comments.

Once, you post your comment, we will review your posted comment and publish it. It may take a time around 24 business working hours.

If you have any questions regarding this article/blog you can contact us on codingzee@gmail.com

sentiment_satisfied Emoticon