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 PictureBox 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"> </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 String, ByVal format As ImageFormat, ByVal 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 EventArgs) Handles 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.
