ImageComponents.Blazor.Wasm.UI 4.0.6

ImageComponents.Blazor.Wasm.UI

Image Components for Blazor is an imaging SDK that allows the view, edit, capture, creation and data manipulation...

Overview

Image Components for Blazor is an imaging SDK that allows the view, edit, capture, creation and data manipulation.

Some of the Image Components functions are: opening file or directory and saving most common images file types (.jpg;.jpeg;.tif;.tiff;.bmp;.gif;.png;.cut;.dds;.g3;.hdr;.ico;.iff;.lbm;.jng;.koa;.mng;.pbm;.pcd;.pcx;.pgm;.ppm;.psd;.ras;.sgi;.tga;.targa;.wbmp;.xbm;.xpm;.wmf;.pdf;*.xps) and convert between them. Thumbnail view of the image multi or single page. Navigation between the pages, by thumbnail click or by toolbar. Image fit to the screen (original, best and width). Rotate left, right, flip and mirror. Zoom + and Zoom -. Inserting, appending, deleting or moving pages. Cropping by selection or auto cropping, resizing, undo, redo, copy and paste. Many filters like invert, grayscale, etc. Image enhance (color, brightness, smooth, sharpen, etc.). Many edge detectors. Glass tool to zoom a particular part of the image. Thumbnail viewing, navigation and position management. Twain and WIA support using ADF or flat bed, multi page or single page. Save and Scanner options by image type or compression (None, JPG, CCITT3, CCITT4, LZW, PDF...) . Access to the most common Capabilities and ICapabilities. Document, page, zone OCR and text search, supporting some common languages. PDF reading and export, multi, single or selected page. PDF text search and extraction. Full customized image annotations including, Note, Stamps, Highlight, Hide, Ellipse, Line, Arrow and Image. Barcode encoder and decoder. Supports Code11, Code 39, Interleaved 2 of 5, Codabar, Code 93, EAN8, EAN13, UPCA, Code128, PDF417, QRCODE. Automatic barcode detection and scan direction:

• Open the _Imports.razor file and append the following line:

	@using ImageComponents.Blazor.UI

• Open the wwwroot folder and change the app.css file appending the following code:

	.imgEditStyle {
		width: 100%;
		min-height: 600px;
		background: #f4f4f4;
		height: calc(100vh - 40px);
	}
	 
	.imgEditStyle * {
		outline: none;
	}
	 
	@media(max-width:767px) {
		.imgEditStyle {
			min-height: 400px;
		}
	}
	 
	@media(min-width:768px) {
		.imgEditStyle {
			min-height: 600px;
		}
	}
	 
	input[type="file"].pgfileElem {
		position: fixed;
		left: -100px;
		top: -100px;
		visibility: hidden;
		width: 0px;
		height: 0px;
		display: none;
	}
	 
	input[type="reset"].pgfileElem {
		position: fixed;
		left: -100px;
		top: -100px;
		visibility: hidden;
		width: 0px;
		height: 0px;
		display: none;
	}
	 
	.loading {
		position: fixed;
		z-index: 999;
		height: 2em;
		width: 2em;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	 
		/* Transparent Overlay */
		.loading:before {
			content: '';
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.3);
		}
	 
	.loader {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		position: relative;
		animation: rotate 1s linear infinite
	}
	 
		.loader::before {
			content: "";
			box-sizing: border-box;
			position: absolute;
			inset: 0px;
			border-radius: 50%;
			border: 5px solid #FFF;
			animation: prixClipFix 2s linear infinite;
		}
	 
	@keyframes rotate {
		100% {
			transform: rotate(360deg)
		}
	}
	 
	@keyframes prixClipFix {
		0% {
			clip-path: polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)
		}
	 
		25% {
			clip-path: polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)
		}
	 
		50% {
			clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)
		}
	 
		75% {
			clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)
		}
	 
		100% {
			clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)
		}
	}

• Add a javascript file to the js folder named browserInterop.js and add the following code:

	var _busyIndicator = null;
	export function raiseInputChange(id) {
		var _element = document.getElementById(id);
		if (_element != null) {
			_element.click();
		}
	}
	 
	export function isPageBusy(isBusy) {
		var _busyIndicator = document.getElementsByClassName('loading');
		if (isBusy) {
			if (_busyIndicator && _busyIndicator.length > 0) {
				_busyIndicator[0].remove();
			}
			document.body.insertAdjacentHTML('beforeend', '<div class="loading"><div class="loader"></div></div>');
			document.body.style.overflowY = 'hidden';
		}
		else {
			if (_busyIndicator && _busyIndicator.length > 0)
			{ _busyIndicator[0].remove(); }
			document.body.style.overflowY = 'auto';
		}
	}
	 
	export function getLocalStorage(key) {
		if (typeof Storage !== "undefined") {
			return localStorage.getItem(key);
		}
		else {
			messageAlert("Local storage is not supported or not enabled. Check if your browser is not in Private mode.", 2);
			return "";
		}
	}
	 
	export function getJsonLocalStorage(key) {
		if (typeof Storage !== "undefined") {
			var _sourceSettings = localStorage.getItem(key);
			if (_sourceSettings !== null) {
				return JSON.parse(_sourceSettings);
			}
			return null;
		}
		else {
			messageAlert("Local storage is not supported or not enabled. Check if your browser is not in Private mode.", 2);
		}
	}
	 
	export function setLocalStorage(key, value) {
		if (typeof Storage !== "undefined") {
			if (value !== null) {
				localStorage.setItem(key, value);
			}
		}
		else {
			messageAlert("Local storage is not supported or not enabled. Check if your browser is not in Private mode.", 2);
		}
	}
	 
	export function setJsonLocalStorage(key, value) {
		if (typeof Storage !== "undefined") {
			if (value !== null) {
				localStorage.setItem(key, JSON.stringify(value));
			}
		}
		else {
			messageAlert("Local storage is not supported or not enabled. Check if your browser is not in Private mode.", 2);
		}
	}

• Open the Home.razor file and add the following code:

	@rendermode InteractiveServer
	 
	<PageTitle>Index</PageTitle>
	 
	<div class="row" id="dvButtons">
		<InputFile id="fileOpenElem" class="pgfileElem" OnChange="@OpenLocalImage" type="file" multiple="" accept=".jpg,.jpeg,.tif,.tiff,.bmp,.gif,.png,.cut,.dds,.g3,.hdr,.ico,.iff,.lbm,.jng,.koa,.mng,.pbm,.pcd,.pcx,.pgm,.ppm,.psd,.ras,.sgi,.tga,.targa,.wbmp,.xbm,.xpm,.wmf,.pdf,.xps,.oxps,.raw,.webp,.jxr,.pfm,.j2k,.jp2" />
		<InputFile id="fileOpenReset" class="pgfileElem" type="reset" />
		<input type="button" @onclick="OpenFile" value="Open File" style="float:left;width:100px;">
	</div>
	<div class="row" style="margin-top:10px;">
		<ImgEdit @ref="imgEdit1"
				 Css="imgEditStyle"
				 ID="imgEdit1"
				 OnComponentInit="OnImgEditInitialized"
				 OnRequestStarted="OnRequestStarted"
				 OnRequestFinished="OnRequestFinished"
				 License="">
		</ImgEdit>
	</div>

• Open the Home.razor.cs and add the following code:

	using ImageComponents.Blazor.ImgEdit;
	using ImageComponents.Blazor.UI;
	using Microsoft.AspNetCore.Components.Forms;
	using Microsoft.AspNetCore.Components;
	using Microsoft.JSInterop;
	 
	namespace HelloBlazorImaging.Components.Pages
	{
		public partial class Home
		{
	 
			private IJSObjectReference browserModule;
			private ImgEdit imgEdit1 = null;
	 
			/// <summary>
			/// Gets or sets the Java-Script runtime.
			/// </summary>
			[Inject] IJSRuntime JsRuntime { get; set; }
	 
			/// <summary>
			/// On after render event.
			/// </summary>
			/// <param name="firstRender">Is first time render.</param>
			protected override async Task OnAfterRenderAsync(bool firstRender)
			{
				if (firstRender)
					browserModule = await JsRuntime.InvokeAsync<IJSObjectReference>("import", "./js/browserInterop.js");
			}
	 
			/// <summary>
			/// On ImgEdit initialized event.
			/// </summary>
			/// <param name="e">Initialize event args.</param>
			private async Task OnImgEditInitialized(EventArgs e)
			{
				//Initialize all other components.
				await imgEdit1.RefreshLayout();
			}
	 
			/// <summary>
			/// On ImgEdit request started.
			/// </summary>
			/// <param name="e">Initialize event args.</param>
			private async Task OnRequestStarted(EventArgs e)
			{
				await IsBusy(true);
			}
	 
			/// <summary>
			/// On ImgEdit request finished.
			/// </summary>
			/// <param name="e">Initialize event args.</param>
			private async Task OnRequestFinished(EventArgs e)
			{
				await IsBusy(false);
			}
	 
			/// <summary>
			/// Is page busy.
			/// </summary>
			/// <param name="busy">Is busy.</param>
			private async Task IsBusy(bool busy)
			{
				await browserModule.InvokeVoidAsync("isPageBusy", busy);
			}
	 
			/// <summary>
			/// Open file input change.
			/// </summary>
			/// <returns></returns>
			private async Task OpenFile()
			{
				await browserModule.InvokeVoidAsync("raiseInputChange", "fileOpenElem")!;
			}
	 
			/// <summary>
			/// Open local image event.
			/// </summary>
			public async Task OpenLocalImage(InputFileChangeEventArgs e)
			{
				await IsBusy(true);
				try
				{
					IBrowserFile imgFile = e.File;
					var buffers = new byte[imgFile.Size];
					using MemoryStream memoryStream = new MemoryStream();
					await imgFile.OpenReadStream(Int32.MaxValue).CopyToAsync(memoryStream);
					buffers = memoryStream.ToArray();
					string imageType = imgFile.ContentType;
					await imgEdit1.LoadFileAsync(Convert.ToBase64String(buffers), imgFile.Name);
					await imgEdit1.FitTo(ICImageFit.Auto, true);
				}
				catch { await IsBusy(false); }
			}
		}
	}

Useful links

• Website
• Documentation
• Online examples