LEADTOOLS Support
Imaging
Imaging SDK Questions
Simple partial view Image Viewer in MVC 5 with leadtools 19.
#1
Posted
:
Monday, April 24, 2017 2:59:53 PM(UTC)
Groups: Registered
Posts: 18
Digging around in the demos and examples I am running into a wall trying to come up with a simple partial view in MVC that would show an image with a toolbar for all of the image commands. I just downloaded the eval and need to present an example on how we would be using this library in our proposed imaging web site. The imageViewerContainer replacement with an image does not seem to be working.
#2
Posted
:
Monday, April 24, 2017 3:02:48 PM(UTC)
Groups: Manager, Tech Support, Administrators
Posts: 218
Was thanked: 12 time(s) in 12 post(s)
Hello,
Thank you for posting on the LEADTOOLS Technical Support Forums.
Are you referring to a demo similar to our Image Processing demo application?
http://demo.leadtools.co...aScript/ImageProcessing/If so, the source for this demo is located in the SDK in the following directory:
C:\LEADTOOLS 19\Examples\JS\Documents\Demos\WebApp\Apps\ImageProcessing
It is an MVC application using the LEADTOOLS HTML5 ImageViewer control:
https://www.leadtools.co...cript/c/imageviewer.htmlPlease let me know if this isn't what you are looking for if you have any further questions.
Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.
#3
Posted
:
Tuesday, April 25, 2017 1:26:10 PM(UTC)
Groups: Registered
Posts: 18
Yea I found this example and actually I will be needing to implement a lot of the functionality of the ImageViewerStyles. My biggest issue is that the help web site is not displaying correctly so I am seriously hampered trying to figure out how to make my POC app. Here are the requirements I have to show to my boss before we can decide to go with Leadtools or not.
1) I need to provide a partial view to view images (tiffs hopefully - but will convert to png in background if I have to)
2) These images will be coming in as streams not URLs so as best as I can tell I guess I must createFromElement or something - since I cannot really read the help screens really hard to tell.
3) I have to provide buttons in my partial view to do the zoom, rotate and other such basic image functions. I am trying to work how the buttons work on the ImageViewerStyles page. Again hampered by the help pages.
#4
Posted
:
Tuesday, April 25, 2017 1:28:54 PM(UTC)
Groups: Manager, Tech Support, Administrators
Posts: 218
Was thanked: 12 time(s) in 12 post(s)
Can you please provide me more information on what is going on with the help pages? You mention "the help web site is not displaying correctly" but I'm not sure what that means.
What links are you trying to access and what does 'not displaying correctly' mean? Can you attach a screenshot? What browser are you using? Can you try reloading and clearing your cache (ctrl+F5)?
Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.
#5
Posted
:
Tuesday, April 25, 2017 1:55:22 PM(UTC)
Groups: Registered
Posts: 18
I cannot see a way to upload an image so I will do the best I can to describe. It looks like I am seeing two pages writing on each other. The current page I am looking at is "https://www.leadtools.com/help/leadtools/v19m/dh/javascript/c/imagevieweritem-createfromelement.html" and I am seeing this page as a help page with list on left overlaid on some kind of form. In the list section looks like hours and some kind of survey and on right is some form where I can put in email and question and maybe upload a file. Sorry hard to see with both pages on top of each other. I am using IE11 and the whole page died when I tried to F12 and change emulation. I am going through a proxy to get to the page, if this matters.
#6
Posted
:
Tuesday, April 25, 2017 2:04:34 PM(UTC)
Groups: Manager, Tech Support, Administrators
Posts: 218
Was thanked: 12 time(s) in 12 post(s)
That is very strange. I just went to that link using IE11 and had no issues so it is likely caused by something with the Proxy.
Have you tried other browsers?
You can attach screenshots to the forums by clicking on 'Post Reply' (not quick reply) and then selecting the attach icon:
Here is what the help page is supposed to look like:
Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.
#7
Posted
:
Wednesday, April 26, 2017 8:48:31 AM(UTC)
Groups: Registered
Posts: 18
Okay I did not see reply, I was using the quick reply. Hopefully the attached shows up. Regardless so far I have not seen anything that tells me I can make the image element load from a stream. I also cannot believe I am the only one that is looking to build a partial view to view an image with all of the buttons to manipulate the image (almost like the old web user control in web forms). I am trying to pull out of the examples all of the pieces I need to show that your product can do what we need, but so far you have not made it easy.
#8
Posted
:
Wednesday, April 26, 2017 9:35:40 AM(UTC)
Groups: Manager, Tech Support, Administrators
Posts: 218
Was thanked: 12 time(s) in 12 post(s)
Thank you for providing me with the screenshot showing the issues that you are seeing. I apologies that you are having issues and I am investigating this with our website and documentation team. I will update you once I have a resolution for you.
Regarding your requirements for this application, can you give me more information on what you mean by a 'partial view'? Are you only wanting to view a part of the image?
Also you mentioned that you will be loading from a stream, do you mean that the request will have a stream in the content of the HttpRequestMesasge and you want to take that and load it in the client? If so, you can modify the Load method from the RasterController.cs in the WebApp project (C:\LEADTOOLS 19\Examples\JS\Documents\Demos\WebApp) to implement a load call that accepts the stream as a MultipartMemoryStreamProvider and then sends the HTTPResponse back to the client like so:
Code:public async Task<HttpResponseMessage> Load(int pageNumber = 1, int resolution = 0, string mimeType = null, int bitsPerPixel = 0, int qualityFactor = 0, int imageWidth = 0, int imageHeight = 0)
{
if (!this.Request.Content.IsMimeMultipartContent())
throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotAcceptable, "Request is not properly formatted"));
var provider = await this.Request.Content.ReadAsMultipartAsync<MultipartMemoryStreamProvider>(new MultipartMemoryStreamProvider());
HttpContent content = (provider.Contents.Count > 0) ? content = provider.Contents[0] : null;
if (content == null) throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotAcceptable, "Request has no content"));
var stream = content.ReadAsStreamAsync().Result;
if (pageNumber < 0)
throw new ArgumentOutOfRangeException("pageNumber", "must be a value greater than or equal to 0");
var page = pageNumber;
// Default is page 1
if (page == 0)
page = 1;
if (resolution < 0)
throw new ArgumentOutOfRangeException("resolution", "must be a value greater than or equals to 0");
// Sanity check on other parameters
if (qualityFactor < 0 || qualityFactor > 100)
throw new ArgumentOutOfRangeException("qualityFactor", "must be a value between 0 and 100");
if (imageWidth < 0)
throw new ArgumentOutOfRangeException("width", "must be a value greater than or equal to 0");
if (imageHeight < 0)
throw new ArgumentOutOfRangeException("height", "must be a value greater than or equal to 0");
// Get the image format
SaveImageFormat saveFormat = SaveImageFormat.GetFromMimeType(mimeType);
// Use a temp file, much faster than calling Load/Info from a URI directly
// In a production service, you might want to create a caching mechanism
try
{
using (RasterCodecs codecs = new RasterCodecs())
{
ServiceHelper.InitCodecs(codecs, resolution);
// Load the page
using (RasterImage image = codecs.Load(stream, 0, CodecsLoadByteOrder.BgrOrGray, pageNumber, pageNumber))
{
// Resize it (will only resize if both width and height are not 0), will also take care of FAX images (with different resolution)
ImageResizer.ResizeImage(image, imageWidth, imageHeight);
// We need to find out the format, bits/pixel and quality factor
// If the user gave as a format, use it
if (saveFormat == null)
{
// If the user did not give us a format, use PNG
saveFormat = new PngImageFormat();
mimeType = "image/png";
}
saveFormat.PrepareToSave(codecs, image, bitsPerPixel, qualityFactor);
// Save it to a memory stream
MemoryStream ms = null;
HttpResponseMessage response = null;
try
{
ms = new MemoryStream();
codecs.Save(image, ms, saveFormat.ImageFormat, saveFormat.BitsPerPixel);
ms.Position = 0;
// Set the MIME type and Content-Type if there is a valid web context
HttpContext currentContext = HttpContext.Current;
if (currentContext != null)
{
currentContext.Response.ContentType = mimeType;
currentContext.Response.Headers.Add("ContentLength", ms.Length.ToString());
}
// If we just return the stream, Web Api will try to serialize it.
// If the return type is "HttpResponseMessage" it will not serialize
// and you can set the content as you wish.
response = new HttpResponseMessage();
response.Content = new StreamContent(ms);
return response;
}
catch
{
if (ms != null)
ms.Dispose();
if (response != null)
response.Dispose();
throw;
}
}
}
}
catch (Exception ex)
{
Log(string.Format("Load - Error:{1}{0}TempFile:{2}{0}Uri:{3}, PageNumber:{4}", Environment.NewLine, ex.Message, tempFile, uri, pageNumber));
throw;
}
}
As for providing buttons to rotate/zoom, have you checked out our HTML5 Viewer Demo? This demo has the ability to zoom in / out, rotate, and flip.
Thanks,
Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.
#9
Posted
:
Wednesday, April 26, 2017 2:58:33 PM(UTC)
Groups: Registered
Posts: 18
Okay perfect for the stream part. I will need to dig in but I have used the RasterCodecs class before. So I would load the HttpContext into the ImageViewer?
As far as partial view - this is a major back bone of the MVC. See this page:
Partial Views. I generally use them almost like I would user control in web forms
#10
Posted
:
Thursday, April 27, 2017 4:30:29 PM(UTC)
Groups: Manager, Tech Support, Administrators
Posts: 218
Was thanked: 12 time(s) in 12 post(s)
Thank you for going into more detail as to what you were wanting.
I have written a simple LEADTOOLS image viewer in a partial view that has a couple methods that you can call to zoom and rotate.
Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.
LEADTOOLS Support
Imaging
Imaging SDK Questions
Simple partial view Image Viewer in MVC 5 with leadtools 19.
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.