How to view images from database in your Web application?
In This Topic
This tutorial shows how to create ASP.NET Core Web application in Visual Studio .NET 2022 and view images from database in web image viewer and web thumbnail viewer on a web page.
Also article can be used for developing ASP.NET MVC 5 application or ASP.NET WebForms application.
Here are steps, which must be done:
-
Create an ASP.NET Core Web application with web image viewer and web thumbnail viewer.
Please read how to create ASP.NET Core Web application with web image viewer and web thumbnail viewer here:
-
Server side: Create data storage, which allows to load images from database and save images to database.
Create the DatabaseDataStorage class, which is derived from Vintasoft.Data.IDataStorage, for accessing images in database.
For doing this press the right mouse button on the "Controllers" folder and select the "Add => Class..." menu from context menu.
Specify that you want to create "Class", set the class name to the "DatabaseDataStorage" and press the "Add" button.
Derive created class from the Vintasoft.Data.IDataStorage interface.
Implement the IDataStorage.CanStore method and specify that data storage can store images in file streams.
Implement the IDataStorage.Contains and IDataStorage.GetItemCopy methods if your application allows you to view a set of existing images from database and do not allow to add, change or remove images.
Important: ASP.NET application image identifier can differ from database image identifier, for example, ASP.NET application image identifier can be created as concatenation of ASP.NET session identifier and database image identifier. In this case data storage must convert ASP.NET application image identifier, which is passed as "key" parameter to the data storage methods, to the database image identifier.
Implement the IDataStorage.AddItem, IDataStorage.SetItem and IDataStorage.DeleteItem methods if your application allows you to view images from database and allows to add, change or remove images.
Implement the IDataStorage.LockItem and IDataStorage.UnlockItem methods if your application allows you to view images from database, allows to add, change or remove images and image must be locked during changing.
Here is code of DatabaseDataStorage class:
using Vintasoft.Data;
namespace WebApplication1.Controllers
{
/// <summary>
/// Storage that allows to store data in database.
/// </summary>
/// <remarks>
/// Current data storage works in read-only mode.
/// </remarks>
public class DataBaseImageStorage : IDataStorage
{
static object _lockObject = new object();
static string _sessionId;
public DataBaseImageStorage(string sessionId)
: base()
{
_sessionId = sessionId;
}
/// <summary>
/// Determines whether the data storage can store data of specified type.
/// </summary>
/// <param name="type">The type of data.</param>
/// <returns>
/// <b>True</b> if data storage can store data of specified type;
/// otherwise, <b>false</b>.
/// </returns>
/// <exception cref="System.ArgumentNullException">If <paramref name="type" /> is <b>null</b>.</exception>
public bool CanStore(Type type)
{
// specify that data storage can work only with images, which are stored in Stream objects
if (typeof(Stream).IsAssignableFrom(type))
return true;
else
return false;
}
/// <summary>
/// Determines whether the data storage contains an item with the specified identifier.
/// </summary>
/// <param name="key">The item key.</param>
/// <returns>
/// <b>True</b> - the data storage contains an item with the specified identifier;
/// <b>false</b> - the data storage does NOT contain an item with the specified identifier.
/// </returns>
/// <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
public bool Contains(string key)
{
lock (_lockObject)
{
// check if image with identifier "key" is stored in database
throw new NotImplementedException();
}
}
/// <summary>
/// Returns an item copy from the data storage.
/// </summary>
/// <param name="key">The item key.</param>
/// <returns>The copy (clone) of item data.</returns>
/// <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
/// <exception cref="System.ArgumentException">Thrown if <paramref name="key"/> is not found.</exception>
/// <exception cref="System.InvalidOperationException">If item with specified <paramref name="key" /> is locked.</exception>
public object GetItemCopy(string key)
{
lock (_lockObject)
{
if (Contains(key))
{
// get image data from database and return Stream object that contains image data
throw new NotImplementedException();
}
else
throw new Exception(string.Format("Data storage does not have image with identifier \"{0}\".", key));
}
}
/// <summary>
/// Returns the keys of all items from data storage.
/// </summary>
/// <returns>The keys of all items from data storage.</returns>
/// <remarks>Method can be not implemented if functionality is not necessary.</remarks>
public string[] GetKeys()
{
lock (_lockObject)
{
// get identifiers ("keys") of all images stored in database
throw new NotImplementedException();
}
}
/// <summary>
/// Adds new item to the data storage.
/// </summary>
/// <param name="key">The item key.</param>
/// <param name="item">The item data.</param>
/// <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
/// <exception cref="System.ArgumentException">An element with the same key already exists in the data storage.</exception>
public void AddItem(string key, object item)
{
lock (_lockObject)
{
// add image with identifier "key" in database
throw new NotImplementedException();
}
}
/// <summary>
/// Sets the existing item in the data storage.
/// </summary>
/// <param name="key">The item key.</param>
/// <param name="item">The item data.</param>
/// <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
/// <exception cref="System.InvalidOperationException">If item with specified <paramref name="key" /> is locked.</exception>
public void SetItem(string key, object item)
{
lock (_lockObject)
{
// set image with identifier "key" in database
throw new NotImplementedException();
}
}
/// <summary>
/// Deletes the item from the data storage.
/// </summary>
/// <param name="key">The item key.</param>
/// <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
/// <exception cref="System.InvalidOperationException">If item with specified <paramref name="key" /> is locked.</exception>
public void DeleteItem(string key)
{
lock (_lockObject)
{
// delete image with identifier "key" in database
throw new NotImplementedException();
}
}
/// <summary>
/// Locks an item in data storage and returns the item.
/// </summary>
/// <param name="key">The item key.</param>
/// <returns>The locked item from data storage.</returns>
/// <exception cref="System.ArgumentNullException">Thrown if <paramref name="key" /> is <b>null</b>.</exception>
/// <exception cref="System.InvalidOperationException">Thrown if item with specified <paramref name="key" /> is already locked.</exception>
/// <seealso cref="UnlockItem(string, object)"/>
/// <remarks>Method must be implemented if image must be locked during changing.</remarks>
public object LockItem(string key)
{
lock (_lockObject)
{
// lock image with identifier "key" in database
throw new NotImplementedException();
}
}
/// <summary>
/// Unlock the locked item in data storage.
/// </summary>
/// <param name="key">The item key.</param>
/// <param name="item">Locked item.<br />
/// The item will be overrwritten if item differs from the item returned by the <see cref="LockItem"/> method.</param>
/// <exception cref="System.ArgumentNullException">Thrown if <paramref name="key" /> is <b>null</b>.</exception>
/// <exception cref="System.InvalidOperationException">Thrown if item with specified <paramref name="key" /> is not locked.</exception>
/// <seealso cref="LockItem(string)"/>
/// <remarks>Method must be implemented if image must be locked during changing.</remarks>
public void UnlockItem(string key, object item)
{
lock (_lockObject)
{
// unlock image with identifier "key" in database
throw new NotImplementedException();
}
}
/// <summary>
/// Releases all resources used by the <see cref="DataBaseImageStorage"/>.
/// </summary>
public void Dispose()
{
throw new NotImplementedException();
}
}
}
Created DatabaseDataStorage class can be used in the following web API controllers: VintasoftImageApiController, VintasoftImageCollectionApiController, VintasoftImageConverterApiController, VintasoftFileApiController, VintasoftImageProcessingApiController, VintasoftImageProcessingDocCleanupApiController, VintasoftAnnotationCollectionApiController, VintasoftPdfApiController, VintasoftOfficeApiController and Vintasoft.Barcode.AspNetCore.ApiControllers.VintasoftBarcodeApiController.
If your application is ASP.NET MVC 5 application - you can use DatabaseDataStorage class in Vintasoft.Imaging.Web.Api2Controllers.VintasoftImageApi2Controller controller and etc.
If your application is WebForms application - you can use DatabaseDataStorage class in Vintasoft.Imaging.Web.HttpHandlers.VintasoftImageHandler handler and etc.
-
Server side: Use "DatabaseDataStorage" in your ASP.NET Core API controllers.
For doing this you need to override the CreateSessionDataStorage method in all VintaSoft ASP.NET Core API controllers used in your application:
using Vintasoft.Data;
namespace WebApplication1.Controllers
{
public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
{
public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment)
: base(hostingEnvironment)
{
}
/// <summary>
/// Creates a data storage for current session.
/// </summary>
/// <param name="sessionId">The session identifier.</param>
/// <returns>The data storage.</returns>
/// <remarks>
/// <b>Important:</b> The overridden method must return data storage that can store <see cref="Stream"/> objects.
/// </remarks>
protected override IDataStorage CreateSessionDataStorage(string sessionId)
{
return new DataBaseImageStorage(sessionId);
}
}
}
-
Client side: Open image from database and view image in the web viewers.
For doing this you need to call the "openFile" function of image collection of web image viewer and pass the image identifier to the "openFile" function:
imageViewer.get_Images().openFile("database-key");
