I'm diving into something without sufficient background, but I feel like there may be simple solutions that don't require me to have in depth knowledge of the topic.
What I am trying to do is have an image co-ordinate system. Basically the user will supply an image, like a house plan. They can then click on points in the image and create markers (like google maps). The next time they retrieve the map, all the markers they added before are there and they can add new ones.
I need to identify the points these markers are located on so I can store that information. I also need to be able to create a layer on the image that contains the markers and renders them in the exact locations they were placed.
I imagine the easiest way to do this is to use pixel co-ordinates...the rub here is that the image won't be a fixed size since there is a web application and an IPad application, so the co-ordinate system needs to work as long as the image is in the same size ratio.
The server size is .NET and as mentioned there is an IPad app, so the solution needs to be viable given that tech stack.
Any ideas?
Instead of using pixel coordinates in absolute terms, you can use the 0 to 1 range. The top left corner is (0,0), bottom right is (1,1) and the center of the image is (0.5,0.5). This way not matter what image size (or zoom level) you have, the markers will always be in the same place.
My suggestion is don't try to figure out the correlation between the actual image and the coordinates. The only thing I would do is use the resolution of the image, aka 800x600 and use that for your grid. Then overlay your markers using that grid on the image. The points you'd remember would just be X and Y values and maybe a tag name/id.
Related
I'm working on an experimental project in which the challenge is to identify and extract an image of the icon or control that the user is has clicked on/touched. The method I'm trying is as follows (I need some help with step 3):
1) Take a screen shot when the user clicks/touches the screen:
2) Apply edge detection:
3) Extract the possible icon images around the Point associated with the user's cursor (Don't know how to do this)
There are easier cases in which the mouse-over event will highlight the icon/control, which allows me to identify the control with a simple screen shot comparison (before and after mouse-over). The above method is specifically for cases in which the icon is not highlighted. I'm new to emgu, so if anyone has any pointers on how to better achieve this, I'm all ears.
Cheers! Matt
Instead of doing edge detection. Consider taking the following steps:
Only grab pixels which are within a certain radius of the point of the user's cursor. Create a new image with just these pixels.
Use thresholding to classify into foreground and background.
Calculate the centroid, (use mean x coordinate and mean y coordinate). Calculate deviation from the mean. Discard foreground pixels which are beyond a certain deviation from the mean. Eg: discard pixels that are more than 1.6 deviations from the mean.
(You may need to experiment with this step ).
Use a convex hull to find the area of the image with the icon in it.
I am trying to crop the object from its background on an image using AForge.net. I have detect the edges of the object using cannyEegeDetector, but I don's know how to crop it using the detected edges.
Do you have any ideas to crop the object from the background?
I don't know anything about the data structure that CannyEdgeDetector returns, but you probably want to treat it with an algorithm similar to contour filling in the selected area (kinda like the fill bucket in MS Paint). On each row of the images pixels, start from the left side of the image scanning right, and each time you cross a boundary, you toggle whether it's in the "fill area". Pixels in the fill area are preserved, ones outside of it are cropped. Hope that helps!
I'm writing a CSS sprite sheet generator. I know there are several decent ones out there, but this is more a personal interest project than anything. I've got a decent algorithm now, but I'm ending up with a lot of leftover whitespace due to the way I'm calculating the position for the next image to pack. So my thought was this:
Given images A and B in C#, how could I find the top-left-most transparent area in image A that would accomodate the area of image B? In other words, assuming image B is a 10x10 image, how could I find the first 10x10 transparent area in image A (assuming there is one)?
I am trying to write a simple program that lets me overlay a dot on top of an image when the image is clicked. I can save the X and Y data back to my database but then I will want to be able to call that information back at a later date and overlay the dots again via code unlike the first time when the user had to click the image.
I got as far as capturing the X and Y of the click no problem but I am having trouble finding examples specifically for what I am trying to do. All of the examples online seem to be for saving the image with the added graphic but I do not need to do that as it will be the same image every time.
Once I can do this, I also need to work out a way that I can detect what area of the image has been clicked. The areas I need to mark out vary in shape and size so I need to try and work out a way to 'map' these areas and then cross reference with the co-ordinates of the users click (I assume that I may need to do some clever geometry stuff for that?)
If anyone has any suggestions of what subjects/classes/methods etc. to research for either of my queries, I would very grateful.
Thanks in advance
You can use the System.Drawing namespace to achieve this.
Create a control and override OnPaint and OnPaintBackground. Store your clicks in a List
In OnPaintBackground, draw the image using DrawImageUnscaled using the graphics object which is passed to you as a parameter.
In OnPaint, loop through your points array and call graphics.FillElipse or similar to draw a little dot.
Because this isnt a retained mode graphics system, you need to keep drawing these items so this may not suit a large number of dots. In that case, you can create an in memory bitmap and get a graphics drawing object using graphics.FromImage.
I'm building a c# app to take photos of visitors for ID badges. I have found a c# wrapper for web cams so can take a snap shot easily, however I need to set the images to a certain number of pixels ideally with the persons head filling most of the area.
I imagine the best way to do this is to allow the end user to drag out a rectangle over the initial image with fixed x and y ratio covering the persons face. This would crop the image and do any resolution adjustment necessary.
Does anyone know of an example similar to this? I think I know how to do the rectangle and get my co-ordinates for the image cropping apart from fixing an x and y ratio. Obviously an example would be quicker than trying to write my own.
As of .Net 3.0, System.Windows.Media.Imaging provides a CroppedBitmap class that inherits from BitmapSource. Its constructor takes a BitmapSource and an Int32Rect. If you pass it your original image and your rect, it will return a cropped image as a BitmapSource.