checking uploaded image resolution and details at client side - apache-flex

In flex, what we do, we normally upload the image from flex end and upload it to the server,
i want to know, can we do some details checking, like i want to find out the image resolution(on the client side) before it is uploaded to the server,
There are going to be two profits, first the client doesn't need to wait for long to image get uploaded, and in case if finding the image resolution is on the server end, so it willtake time, even the image to be uploaded is not of expected resolution
second, the user interaction & interface with the flex application will be improved,
so, please give some idea to to this sort of checking from the flex end

If you mean the width/height measuring of a bitmap loaded into your flex app,
width/height is stored in BitmapData structure
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/BitmapData.html
For Image flex control it can be accessed with the construction:
// image_control is an instance of mx.controls.Image
var width:Number = 0;
var height:Number = 0;
if (image_control.content is Bitmap)
{
height= (image_control.content as Bitmap).bitmapData.width;
height= (image_control.content as Bitmap).bitmapData.height;
}

I suppose you're speaking of desktop app. Otherwise you woun't be able to touch any local file (you can only init it's uppload to server).
To work with jpg and png you can use com.adobe.images packages of as3corelib. Trere's able to get height/width or resolution of an image.
Although I belive it's better to perform manipulations with images on server-side

For flex, you can use the FileReference.browse function to load file from hard disk. If you want to check the width and height of the image, you can refer to Dmitry Sapelnikov's answer. If you want to check the total bytes of the image, you can try:
var bitmapByteSize:int = bitmap.bitmapData.getPixels(bitmap.bitmapData.rect).length;
Only checking the resolution of the image may not enough. If you need to modify the image, you may take a look on the following:
http://marstonstudio.com/2007/10/19/how-to-take-a-snapshot-of-a-flash-movie-and-automatically-upload-the-jpg-to-a-server-in-three-easy-steps/
It may give you some hints.

Is your Flex app a desktop app? If so you could load the file from the user's hard drive first, such as: http://mariusht.com/blog/2009/04/01/loading-local-images-directly-into-flash-player-10/
And then get the width and height (and probably a way to get the size) before sending it to a server.
BTW, the resolution of any image to be displayed on the web is always 72 DPI. You can't change the resolution of a jpeg or png for example, but you could print them at different resolutions. I think you are actually looking for the dimensions (width / height).

Related

Why does file size remain static despite ImageSharp JpegEncoder.Quality setting?

I’m trying to reduce the size of photo thumbnails (100x75 px) generated with SixLabors ImageSharp, using the JpegEncoder. However the images don’t seem to vary in file size much, despite quality level used.
In my legacy System.Drawing code, when I used an ImageCodecInfo encoder and an EncoderParameter for Imaging.Encoder.Quality set to 30, I’d receive nice low-quality images — about 2k. Perfect for thumbnails.
With ImageSharp, no matter what I set the SixLabors.ImageSharp.Formats.Jpeg.JpegEncoder.Quality to, the images are always about 24k. Quality can be set 0-100, and the visible quality goes down, but the file size doesn’t dip much — even when the jpegs are comically compressed. Always about 24k.
Can anyone explain why this is? Why does an image at .Quality 5 get written to about the same size as 90, despite dramatic visible compression? Are there other properties I need to set with this encoder? Should I be using a different format for better results?
image.Mutate(x => x.Resize(width, height));
SixLabors.ImageSharp.Formats.Jpeg.JpegEncoder encoder = new SixLabors.ImageSharp.Formats.Jpeg.JpegEncoder();
encoder.Quality = 30; //0-100. 30 was my System.Drawing code.
image.Save(thumbnailPath, encoder);
EDIT: My legacy code may have "extracted" the thumbnail image from the source image, via System.Drawing.GetThumbnailImage, then saved that. These thumbs may be very small to begin with. Sounds like this is different than scaling a new thumbnail from the source image? Legacy code:
Image theThumb = theImage.GetThumbnailImage(width, height, myCallback, IntPtr.Zero);
//set up parameter for compression quality
EncoderParameters encoderParameters = new EncoderParameters(1);
encoderParameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 30);
//codec to use
ImageCodecInfo encoder = ImageCodecInfo.GetImageEncoders()[1]; //"image/jpeg"
theThumb.Save(thumbnailPath, encoder, encoderParameters);
...Seems like the MS documentation is saying about the same -- extracted thumbnails are different than scaling the source image:
https://learn.microsoft.com/en-us/dotnet/api/system.drawing.image.getthumbnailimage?view=dotnet-plat-ext-6.0
If the Image contains an embedded thumbnail image, this method
retrieves the embedded thumbnail and scales it to the requested size.
If the Image does not contain an embedded thumbnail image, this method
creates a thumbnail image by scaling the main image.
(I'm new to .NET 6 tho, so not sure what "Platform extensions" are and if this will work in a .NET Core library. Looks like they may be part of the "Windows Compatibility Pack" NuGet package, but is for Windows-only deployments. Since I'm deploying on Mac this System.Drawing.GetThumbnailImage may not work -- thus working with ImageSharp.)
EDIT: The ImageSharp code is scaling a new image from the source, and it appears to retain EXIF data. My legacy code thumbs (extracted from the source) don't contain EXIF data. This may be the source of the bloat. Especially if there is a thumbnail in the EXIF data itself.
I'll try finding a method or library to scrub the EXIF prior to saving a new scaled thumbnail, and see if that is smaller.
Thanks!
It was the XMP metadata. Resizing source images down to thumbnails maintains their meta collections. You must remove it prior to saving. Alternatively, use the method to extract the actual thumbnail from the metadata rather than create it new.
Related question on the EXIF removal:
How do I clear an Image's EXIF data with ImageSharp?
Related question on extracting thumbnails:
How do I extract a jpeg's EXIF thumbnail using ImageSharp?

Firebase cloud function image resize

Following the example here https://github.com/firebase/functions-samples/blob/master/generate-thumbnail/functions/index.js
How do I notify the client when the image is processed?
I want to have a form upload a photo and resize it to multiple sizes. How do I let the client know when the the cloud function is finished?
I'm using firebase/storage to upload the image client side, then I have a could function listening for files to be uploaded functions.storage.object().onFinalize and processing/resize the images. Is there a callback to the client when the cloud function is finished or to I need to setup pub/sub?
Your ultimate new images (the small ones - or whatever they are), would have some URL, let's say storageCompany.net/123123123123.jpg
So in your realtime Firebase, you will have some location that gives these URLs.
So maybe something like ..
user/NNNN/photos/thumbnails
so to be clear, you might have
user/NNNN/photos/thumbnails/726376733677.jpg
user/NNNN/photos/thumbnails/808080188180.jpg
user/NNNN/photos/thumbnails/363636636636.jpg
and now you're adding
user/NNNN/photos/thumbnails/123123123123.jpg
So indeed, your apps would simply watch for new items (ie, strings - the URLs) appearing in that location!
Just to be clear, let's say you have an ios or droid app that shows "any sort of images", and this is a Firebase project.
So, in your example is "thumbnail images" which are "created by a server".
But it just doesn't matter what sort of images you are showing.
In a
Firebase project, which
"Shows images"
The basic idea is simply what I explain above - you just have, one way or another, a Firebase location which has "the URLs of the images"
It's that simple!
Once the image is "ready" - no matter how that happens - upload, image being generated by 3D software .. whatever ..
That's how you make a Firebase project "with images". iOS, droid or www.
Of course there are many variations. In this example ..
we have a big folder with many "images". each "image" has many fields, including various actual image URLs (thumbnails, big thumbnails, videos, etc etc)
Precisely as you ask, the "thumbnail" (say) URL only appears when that image has been created and upload to some storage URL!
Enjoy
You will have to arrange for an exchange point between the client and your function. Typically, that will be some known location in the database where the function will write the result, and the client can listen for changes to know when the work is complete.
The example you're using will need to be modified to allow the client and server to agree on a unique location ahead of time.
There are two problems with Firebase image resizing - (1) it's tricky to notify the client once the image resizing is complete, and (2) you never know which exact size the client-side app may need (assuming you're building a responsive app).
These two issues can be solved by using a dynamic image resizing approach. The client app can upload images directly to Google Storage (via signed URLs and PUT requests), once the upload is complete it can request the resized image(s) right away. For example:
https://i.kriasoft.com/sample.jpg - original image
https://i.kriasoft.com/w_200,h_100/sample.jpg - dynamically resized image
The resized images can be cached in both the Google Storage bucket and at CDN.
$ npm install image-resizing --save
const { createHandler } = require("image-resizing");
module.exports.img = createHandler({
// Where the source images are located.
// E.g. gs://s.example.com/image.jpg
sourceBucket: "s.example.com",
// Where the transformed images need to be stored.
// E.g. gs://c.example.com/w_80,h_60/image.jpg
cacheBucket: "c.example.com",
});
https://github.com/kriasoft/image-resizing

How to change the background image IBM mobile anywhere app in login page

I am looking to re-design the Login page. I need to add a new background image. Let me know where should I be copying this image into the project and where should I be specifying the image reference. I see the change made directly into Login.html are not reflecting in the output.
There are two logos in Maximo Anywhere, ibmLogoDark.png and ibmLogoLight.png (for the light and dark backgounds). You will need to obtain suitable replacement (transparent backgound) logo gifs or png files from your customer, of an equivalent size.
The IBM logo image files are in:
\MaximoAnywhere\apps\WorkExecution\common\js\platform\ui\control\images\mdpi
and also in:
\MaximoAnywhere\apps\WorkExecution\common\idx\mobile\themes\common\idx\images
So that is where I put copies of my customers replacement logos.
You'll want to give them different names from the IBM logos just so they don't get overwritten so easily. There are 4 CSS files you need to update to the new name:
about.css, launch.css and login.css in:
\MaximoAnywhere\apps\WorkExecution\common\idx\mobile\themes\common\idx
and mdpi.css in
\MaximoAnywhere\apps\WorkExecution\common\js\platform\ui\control\css
There are also two app.xml files you need to update to point to the new names. One in each of:
\MaximoAnywhere\apps\WorkExecution\platform-artifacts\dialog
and
\MaximoAnywhere\apps\WorkExecution\platform-artifacts\login
Then rebuild and you're done. Oh, and make sure you clear your browser cache (or use incognito mode) to test.

How to Display Uploaded Image from File System

I'm attempting to modify an inherited project that has a convoluted process of displaying uploaded images using an ImageMap control.
The current process inserts a new database record with image file name as well as model number and part number. The image files are saved to a virtual directory visible to IIS. Each part number has a corresponding .htm file containing an image map referencing the uploaded image. The image map has to be sized for each part and saved in the file system.
How can I streamline this process using either client side or server side controls? I'd like to bypass use of image maps as they require manual sizing. Can a control be used that auto sizes the image? Should the images be stored inside the database or kept in the file system?
Thanks for your advice;)
Storing the images in the database is IMHO a much more scalable solution.
Take a look at the Image Resizer project and its associated plugins for a way to resize the images, regardless of where you store them:
http://imageresizing.net/
http://weblogs.asp.net/bleroy/archive/2011/10/22/state-of-net-image-resizing-how-does-imageresizer-do.aspx
http://nathanaeljones.com/163/20-image-resizing-pitfalls/
You could use regular ASP.NET controls to display the images, for example, a ListView.

how to images store localy from xml using flex 3?

I have one xml link. that link have collections of images(apx 1000 images).
when i flex applications start at the time load all images in locally. then when i need that images then use it.
How i do this... give me some links and logic.
Using flex 3.
Thanks advance.
senthil.
Load the .xml form server or so.
Parse the .xml and create a Map where you store all the image URLs
Place an Image Component on your UI and set the "source" property to the value of the image URL
Flash Plugin will load the image from the URL and will show the image when done.
If you are facing a "SandboxVaiolationException" (or something like that) you need to tell your server to let the request go.
If you want to change the "source" Property of the Image at runtime, just set it after a click oder an other Event. (is no problem)

Resources