.NET CF 2.0: Draw an PNG over a image with background transparency - compact-framework

I want to draw an image over other without drawing its backgroud. The image that I want to draw it's a star. I want to put some stars over a map image.
The problem is that the star's image has a white backgroud and when I draw over the map the white background appears.
My method to draw the star is like this:
Graphics graphics = Graphics.FromImage(map);
Image customIcon = Image.FromFile("../../star.png");
graphics.DrawImage(customIcon, x, y);
I tried with transparent backgroud images (PNG and GIF formats), and it always draw something surrounding the star. How can I draw a star without its background?
The program is for Windows Mobile 5.0 and above, with Compact Framework 2.0 SP2 and C#.
I tried with this code:
Graphics g = Graphics.FromImage(mapa);
Image iconoPOI = (System.Drawing.Image)Recursos.imagenPOI;
Point iconoOffset = new Point(iconoPOI.Width, iconoPOI.Height);
System.Drawing.Rectangle rectangulo;
ImageAttributes transparencia = new ImageAttributes();
transparencia.SetColorKey(Color.White, Color.White);
rectangulo = new System.Drawing.Rectangle(x, y, iconoPOI.Width, iconoPOI.Height);
g.DrawImage(iconoPOI, rectangulo, x, y, iconoPOI.Width, iconoPOI.Height, GraphicsUnit.Pixel, transparencia);
But I don't see anything on map.
X and Y are de coordinates where I want to draw the iconoPOI which it's a PNG imagen with a white background.
Thank you!

One valid answer can be found here:
Answer
Thank you!

Normally this task is pretty complicated (you have to tap the windows API BitBlt function and create a black-and-white mask image and other stuff), but here's a simple way to do it.
Assuming you have one bitmap for your background image (bmpMap) and one for your star image (bmpStar), and you need to draw the star at (xoffset, yoffset), this method will do what you need:
for (int x = 0; x < bmpStar.Width; x++)
{
for (int y = 0; y < bmpStar.Height; y++)
{
Color pixel = bmpStar.GetPixel(x, y);
if (pixel != Color.White)
{
bmpMap.SetPixel(x + xoffset, y + yoffset, pixel);
}
}
}
SetPixel and GetPixel are incredibly slow (the preferred way is to use the bitmap's LockBits method - there are questions here on SO that explain how to use it), but this will get you started.

Related

CreateJs Drawing with alpha

I implemented a little drawing function into my app with CreateJS like so:
var currentPosition = this.posOnStage(event);
var drawing = container.getChildByName('drawing');
drawing.graphics.ss(this.brushSize, "round").s(this.brushColor);
drawing.graphics.mt(this._lastMousePosition.x, this._lastMousePosition.y);
drawing.graphics.lt(currentPosition.x, currentPosition.y);
drawing.alpha = this.brushAlpha;
container.updateCache(this.enableErasing ? "destination-out" : "source-over");
drawing.graphics.clear();
this._lastMousePosition = this.posOnStage(event);
As you can see, the alpha value of this drawing can change. Sadly you can draw over a point you once did draw, so when you draw over a point multiple times the alpha effect will go away. Any idea how to solve this ?
Thanks :)
EDIT:
I tried it like gskinner and Lanny 7 proposed, but it didn't work. I attached a image so you can see the problem.
As suggested by Lanny, apply the alpha to the actual stroke, not to the Shape. You can use Graphics methods to help with this.
For example:
// set the brush color to red with the current brush alpha:
this.brushColor = createjs.Graphics.getRGB(255, 0, 0, this.brushAlpha);

Crop / Clip Images in WinRT [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
How I can Crop / Clip images in WinRT. I have an image filled completely in a windows 8 window. I need to clip / crop the image from center and i need to display the two image section into two separate grids. How I can do the same through windows 8. Is it possible to implement this without using WritableBitmapEx. If no, how to do the same through WritableBitmapEx.
There are many ways to do it actually, each with some pros and cons.
WriteableBitmapEx seems like a popular solution. I have a similar implementation in WinRT XAML Toolkit. Both are essentially copying blocks of pixels from a full image bitmap. It might not be the fastest way, but if you'd want to get an out of the box solution - it is one that is easy to use. You need to copy the pixels, so you are not optimizing for memory use at the time of the operation and so might run out of memory on very large images quicker. You can recrop easily though end save the results to an image file if you want.
The BitmapDecoder solution Jan recommended is one I often use as it is part of the platform, written in native code and possibly highly optimized and you don't copy the pixels, but if you want to recrop - you'll need to decode the image again.
Xyroid's suggestion with Clip geometry is a quick display-only solution. You don't actually modify the bitmap in memory - you simply display a region of it on the screen. You need then to keep the entire image in memory and if you want to save it - you still need to update the bitmap to save it - by using either one of the first two solutions or maybe use RenderTargetBitmap.Render() if screen resolution is enough for you. It should be very quick though to update the crop region displayed on the screen for quick preview.
Another one is with a Rectangle filled with an ImageBrush where you can apply a Transform and specify the Rectangle size to control cropping. It is fairly similar to the Clip solution only instead of clipping an image and in this case you actually have to use the Tramsform (which you can also do on a Clip - RectangleGeometry). For quick updates - using a Transform might actually be a bit faster than updating the geometry and also supports scaling and rotations.
You can use the Bitmapdecoder and the BitmapTransform classes. This example is very good for cropping. You should also read this tutorial for clipping. Basically you implement a function like this (taken from the example):
async public static Task<ImageSource> GetCroppedBitmapAsync(StorageFile originalImgFile, Point startPoint, Size corpSize, double scale)
{
if (double.IsNaN(scale) || double.IsInfinity(scale))
{
scale = 1;
}
// Convert start point and size to integer.
uint startPointX = (uint)Math.Floor(startPoint.X * scale);
uint startPointY = (uint)Math.Floor(startPoint.Y * scale);
uint height = (uint)Math.Floor(corpSize.Height * scale);
uint width = (uint)Math.Floor(corpSize.Width * scale);
using (IRandomAccessStream stream = await originalImgFile.OpenReadAsync())
{
// Create a decoder from the stream. With the decoder, we can get
// the properties of the image.
BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);
// The scaledSize of original image.
uint scaledWidth = (uint)Math.Floor(decoder.PixelWidth * scale);
uint scaledHeight = (uint)Math.Floor(decoder.PixelHeight * scale);
// Refine the start point and the size.
if (startPointX + width > scaledWidth)
{
startPointX = scaledWidth - width;
}
if (startPointY + height > scaledHeight)
{
startPointY = scaledHeight - height;
}
// Create cropping BitmapTransform and define the bounds.
BitmapTransform transform = new BitmapTransform();
BitmapBounds bounds = new BitmapBounds();
bounds.X = startPointX;
bounds.Y = startPointY;
bounds.Height = height;
bounds.Width = width;
transform.Bounds = bounds;
transform.ScaledWidth = scaledWidth;
transform.ScaledHeight = scaledHeight;
// Get the cropped pixels within the bounds of transform.
PixelDataProvider pix = await decoder.GetPixelDataAsync(
BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Straight,
transform,
ExifOrientationMode.IgnoreExifOrientation,
ColorManagementMode.ColorManageToSRgb);
byte[] pixels = pix.DetachPixelData();
// Stream the bytes into a WriteableBitmap
WriteableBitmap cropBmp = new WriteableBitmap((int)width, (int)height);
Stream pixStream = cropBmp.PixelBuffer.AsStream();
pixStream.Write(pixels, 0, (int)(width * height * 4));
return cropBmp;
}
}
XAML static way, if my screen size is 1366x768 & I want to clip center 400x300 image then I would do this.
<Image Source="Assets/img100.png" Stretch="Fill">
<Image.Clip>
<RectangleGeometry Rect="483,234,400,300" />
</Image.Clip>
</Image>
Dynamic way. It will make center clipping for all resolution, though height & width is fixed.
double _Height = 300, _Width = 400;
img.Clip = new RectangleGeometry
{
Rect = new Rect((Window.Current.Bounds.Width - _Width) / 2, (Window.Current.Bounds.Height - _Height) / 2, _Width, _Height)
};
Don't forget to checkout...
How to resize Image in C# WinRT/winmd?
Crop image with rectangle
Crop image with dynamic rectangle coordinate
Cropping tool after file picker (like the one after you take a picture)

How to use open cv to detect black rectangles on the image ios [duplicate]

I am stuck with a problem that is how to recognize some patterns in image.
the image is the image of paper which is pure white and the patterns are in four corners are in black.
I want to recognize the black patterns on the image?
I surf a lot on the net and found that the opencv as a answer. but there is nothing provided that describe how to use opencv in order to achieve the required feature.
Please help me with some coding point of view or provide some link which I should follow or any name of any open source library which I should use to achieve this feature.
The image for pattern is below:-
The image consist of pure white background and four black patterns in the corner.I need to recognize these black patterns in the all four corners all then process the image.One corner shown in oval to highlight it.
Any suggestions will be highly appreciated.
Thanks in advance!
I really don't understand your problem - if you say:
The image is the image of paper which is pure white and the patterns
are in four corners are in black.
Then what's the problem to mask only these four contours from image? After doing mask with 4 squares with length 40 pixels I got this:
To remove small areas you can use morphological operations. I got this:
And just draw them (optional) on input image. Here's result:
To implement this algorithm I use OpenCV library. I'm 100% sure that it works on IOS - OpenCV team finally published IOS version. So if you say:
I tried running the OpenCV-iOS link but the project does not run, it
is showing errors.
Then we can't help you with that because we are not telepathists to see your problem. Just small suggestion - try to google your problem. I'm 99% sure that it should help.
And lest I forget - here's c++ code:
Mat src = imread("input.png"), tmp;
//convert image to 1bit
cvtColor(src, tmp, CV_BGR2GRAY);
threshold(tmp, tmp, 200, 255, THRESH_OTSU);
//do masking
#define DELTA 40
for (size_t i=0; i<tmp.rows; i++)
{
for (size_t j=0; j<tmp.cols; j++)
{
if(!((i < DELTA && j < DELTA)
|| (i < DELTA && j > tmp.cols - DELTA)
|| (i > tmp.rows - DELTA && j < DELTA)
|| (i > tmp.rows - DELTA && j > tmp.cols - DELTA)))
{
//set color to black
tmp.at<uchar>(i, j) = 255;
}
}
}
bitwise_not(tmp,tmp);
//erosion and dilatation:
Mat element = getStructuringElement(MORPH_RECT, Size(2, 2), Point(1, 1));
erode(tmp, tmp, element);
dilate(tmp, tmp, element);
//(Optional) find contours and draw them:
vector<Vec4i> hierarchy;
vector<vector<Point2i> > contours;
findContours(tmp, contours, hierarchy, CV_RETR_EXTERNAL, CV_CHAIN_APPROX_SIMPLE);
for (size_t i=0; i<contours.size(); i++)
{
drawContours(src, contours, i, Scalar(0, 0, 255), 1);
}
Maybe this question is helpful for you, especially the link to the Tennis Ball Recognizing Tutorial seems to be pretty much what you are looking for.
Regarding how to use OpenCV on iOS you might want to take a look at OpenCV-iOS and Computer Vision with iOS.

pattern recognition while taking pictures and identify the patterns and do manipulation on image accordingly [duplicate]

I am stuck with a problem that is how to recognize some patterns in image.
the image is the image of paper which is pure white and the patterns are in four corners are in black.
I want to recognize the black patterns on the image?
I surf a lot on the net and found that the opencv as a answer. but there is nothing provided that describe how to use opencv in order to achieve the required feature.
Please help me with some coding point of view or provide some link which I should follow or any name of any open source library which I should use to achieve this feature.
The image for pattern is below:-
The image consist of pure white background and four black patterns in the corner.I need to recognize these black patterns in the all four corners all then process the image.One corner shown in oval to highlight it.
Any suggestions will be highly appreciated.
Thanks in advance!
I really don't understand your problem - if you say:
The image is the image of paper which is pure white and the patterns
are in four corners are in black.
Then what's the problem to mask only these four contours from image? After doing mask with 4 squares with length 40 pixels I got this:
To remove small areas you can use morphological operations. I got this:
And just draw them (optional) on input image. Here's result:
To implement this algorithm I use OpenCV library. I'm 100% sure that it works on IOS - OpenCV team finally published IOS version. So if you say:
I tried running the OpenCV-iOS link but the project does not run, it
is showing errors.
Then we can't help you with that because we are not telepathists to see your problem. Just small suggestion - try to google your problem. I'm 99% sure that it should help.
And lest I forget - here's c++ code:
Mat src = imread("input.png"), tmp;
//convert image to 1bit
cvtColor(src, tmp, CV_BGR2GRAY);
threshold(tmp, tmp, 200, 255, THRESH_OTSU);
//do masking
#define DELTA 40
for (size_t i=0; i<tmp.rows; i++)
{
for (size_t j=0; j<tmp.cols; j++)
{
if(!((i < DELTA && j < DELTA)
|| (i < DELTA && j > tmp.cols - DELTA)
|| (i > tmp.rows - DELTA && j < DELTA)
|| (i > tmp.rows - DELTA && j > tmp.cols - DELTA)))
{
//set color to black
tmp.at<uchar>(i, j) = 255;
}
}
}
bitwise_not(tmp,tmp);
//erosion and dilatation:
Mat element = getStructuringElement(MORPH_RECT, Size(2, 2), Point(1, 1));
erode(tmp, tmp, element);
dilate(tmp, tmp, element);
//(Optional) find contours and draw them:
vector<Vec4i> hierarchy;
vector<vector<Point2i> > contours;
findContours(tmp, contours, hierarchy, CV_RETR_EXTERNAL, CV_CHAIN_APPROX_SIMPLE);
for (size_t i=0; i<contours.size(); i++)
{
drawContours(src, contours, i, Scalar(0, 0, 255), 1);
}
Maybe this question is helpful for you, especially the link to the Tennis Ball Recognizing Tutorial seems to be pretty much what you are looking for.
Regarding how to use OpenCV on iOS you might want to take a look at OpenCV-iOS and Computer Vision with iOS.

How to detect an image border programmatically?

I'm searching for a program which detects the border of a image,
for example I have a square and the program detects the X/Y-Coords
Example:
alt text http://img709.imageshack.us/img709/1341/22444641.png
This is a very simple edge detector. It is suitable for binary images. It just calculates the differences between horizontal and vertical pixels like image.pos[1,1] = image.pos[1,1] - image.pos[1,2] and the same for vertical differences. Bear in mind that you also need to normalize it in the range of values 0..255.
But! if you just need a program, use Adobe Photoshop.
Code written in C#.
public void SimpleEdgeDetection()
{
BitmapData data = Util.SetImageToProcess(image);
if (image.PixelFormat != PixelFormat.Format8bppIndexed)
return;
unsafe
{
byte* ptr1 = (byte *)data.Scan0;
byte* ptr2;
int offset = data.Stride - data.Width;
int height = data.Height - 1;
int px;
for (int y = 0; y < height; y++)
{
ptr2 = (byte*)ptr1 + data.Stride;
for (int x = 0; x < data.Width; x++, ptr1++, ptr2++)
{
px = Math.Abs(ptr1[0] - ptr1[1]) + Math.Abs(ptr1[0] - ptr2[0]);
if (px > Util.MaxGrayLevel) px = Util.MaxGrayLevel;
ptr1[0] = (byte)px;
}
ptr1 += offset;
}
}
image.UnlockBits(data);
}
Method from Util Class
static public BitmapData SetImageToProcess(Bitmap image)
{
if (image != null)
return image.LockBits(
new Rectangle(0, 0, image.Width, image.Height),
ImageLockMode.ReadWrite,
image.PixelFormat);
return null;
}
If you need more explanation or algorithm just ask with more information without being so general.
It depends what you want to do with the border, if you are looking at getting just the values of the edges of the region, use an algorithm called the Connected Components Region. You must know the value of the region prior to using the algorithm. This will navigate around the border and collect the outside region. If you are trying to detect just the outside lines get the gradient of the image and it will reveal where the lines are. To do this convolve the image with an edge detection filter such as Prewitt, Sobel, etc.
You can use any image processing library such as Opencv. which is in c++ or python.
You should look for edge detection functions such as Canny edge detection.
Of course this would require some diving into image processing.
The example image you gave should be straight forward to detect, how noisy/varied are the images going to be?
A shape recognition algorithm might help you out, providing it has a solid border of some kind, and the background colour is a solid one.
From the sounds of it, you just want a blob extraction algorithm. After that, the lowest/highest values for x/y will give you the coordinates of the corners.