To zoom images in and out, there is a possible way to resize the pictureBox and showing image in strechmode. Although I can not use it efficiently becauce in general over 8x it gives storage error [think that a pictureBox has the Size(32k, 32k) it needs over 1GB memory !
Is there a special method, or should I zoom only the seen part of the image by using ImageClone ?
Update:
Here is the project at first try to zoom at the project [impossible, storage error] than delete the 41. line in form.cs :
pictureBox1.Image = youPicture;
After deleting this line, the program will work, please move the zoomed image.
Here is the link: http://rapidshare.com/files/265835370/zoomMatrix.rar.html
By using the matrix object and the transform property of your graphics object:
using(Graphics g = this.CreateGraphics())
{
using(Bitmap youPicture = new Bitmap(yourPictureFile))
{
g.DrawImage(youPicture, 0, 0, 300, 100); //set the desired size
//Now you need to create a matrix object to apply transformation on your graphic
Matrix mat = new Matrix();
mat.Scale(1.5f, 1.5f, MatrixOrder.Append); //zoom to 150%
g.Transform = mat;
g.DrawImage(youPicture, new Rectangle(...), 0, 0, youPicture.Width,
youPicture.Height, GraphicsUnit.Pixel) ;
}
}
I personally would just zoom the visible part as the rest is hidden anyway (and thus no use)
See this answer to an earlier question. You definitely don't want to zoom by making the image huge and showing only part of it - you'll run into the memory problem that you've already encountered. Also, the stretch mode of a picture box doesn't use high-quality interpolation, so the result will look pretty crappy.
In the answer I linked here, I included a link to a C# project that shows you how to do this kind of zooming.
Update: here is a direct link to the downloadable project.
Related
I was working on some image editing using System.Drawing, and now ported everything to SkiaSharp in order to use it on Linux / .NET Core. Everything works fine, except I have not yet found a way to programmatically give images rounded corners.
I wrote some code that relies on drawing a path in the form of a circle and then tries to color the outside of the path transparent. This does not work though since it seems like there are multiple layers and making parts of the upper layer transparent does not make the whole region of the image (all layers) transparent. Here is my code:
public static SKBitmap MakeImageRound(SKBitmap image)
{
SKBitmap finishedImage = new SKBitmap(image.Width, image.Height);
using (SKCanvas canvas = new SKCanvas(finishedImage))
{
canvas.Clear(SKColors.Transparent);
canvas.DrawBitmap(image, new SKPoint(0, 0));
SKPath path = new SKPath();
path.AddCircle(image.Width / 2, image.Height / 2, image.Width / 2 - 1f);
path.FillType = SKPathFillType.InverseEvenOdd;
path.Close();
canvas.DrawPath(path, new SKPaint {Color = SKColors.Transparent, Style = SKPaintStyle.Fill });
canvas.ResetMatrix();
return finishedImage;
}
}
I am sorry if this is bad code, this is my first experience with image editing in C#, and therefore I also am an absolute beginner in SkiaSharp. I modified a System.Drawing code I got from here.
I also took a look at this Microsoft document. It shows clipping using paths, but I have not yet been able to get that to work either.
So in conclusion: I am searching for a way to make all layers of an image/the canvas transparent in certain regions.
Any help is greatly appreciated! :D
I think you can do this by setting the SPaint.BlendMode = SKPaintBlendMode.Src. That means that when the canvas is drawing, it just must use the source color, and replace the existing colors.
https://learn.microsoft.com/dotnet/api/skiasharp.skpaint.blendmode
What you are actually doing with
canvas.DrawPath(path, new SKPaint { Color = SKColors.Transparent});
is picking up a brush, dipping it in the transparent paint, and then drawing. So you see nothing. The paint is clear.
But, what you even more want to do is clip before drawing:
https://learn.microsoft.com/dotnet/api/skiasharp.skcanvas.clippath
canvas.Clear(SKColors.Transparent);
// create the circle for the picture
var path = new SKPath();
path.AddCircle(image.Width / 2, image.Height / 2, image.Width / 2 - 1f);
// tell the canvas not to draw outside the circle
canvas.ClipPath(path);
// draw the bitmap
canvas.DrawBitmap(image, new SKPoint(0, 0));
I'm trying to use the following code to copy a portion of the screen to a new location on my Windows form.
private void Form1_Paint(object sender, PaintEventArgs e)
{
var srcPoint = new Point(0,0);
var dstPoint = new Point(Screen.PrimaryScreen.Bounds.Width/2, Screen.PrimaryScreen.Bounds.Height/2);
var copySize = new Size(100, 100);
e.Graphics.CopyFromScreen(srcPoint, dstPoint, copySize, CopyPixelOperation.SourceCopy);
}
The CopyFromScreen function appears to ignore any clips set before it.
e.SetClip(new Rectangle(srcPoint.X, srcPoint.Y, 20, 20));
Am I doing something wrong or is this just the wrong approach.
For context: I'm trying to mitigate a UI widescreen game issue by copying the HUD at the edges and to be centered closer to the middle.
I am aware of FlawlessWidescreen, but it doesn't support many less popular games. I suppose poking around in memory (what flawless does) could also work but is almost always against TOS.
Edit: final goal is to copy some arbitrary path as the shape rather than a simple rectangle (I was hoping from an image mask).
Edit #2:
So I have an irregular shape being drawn every 100ms. It turns out it just bogs the game down until I slow it down to every 500ms. But still the game isn't smooth. Is this operation of copying and drawing an image just going to be too heavy of an operation in GDI+? I was thinking it was simple enough to not bog anything down.
Thoughts before I mark the answer as accepted?
I guess it is indeed the wrong approach.
The ClippingRegion is only used for clipping the DrawXXX and FillXXX commands, including DrawImage (!).
The CopyFromScreen however will use the given Points and Size and not clip the source.
For a Rectangle region this is no problem since you can achieve the same result by choosing the right Point and Size values.
But once you aim at using more interesting clipping regions you will have to use an intermediate Bitmap onto which you copy from the screen and from which you can then use DrawImage into the clipped region.
For this you can create more or less complicated GraphicsPaths.
Here is a code example:
After putting the cliping coordinates into a Rectangleor GraphicsPath clip you can write something like this:
e.Graphics.SetClip(clip);
using (Bitmap bitmap = new Bitmap(ClientSize.Width, ClientSize.Height))
{
using (Graphics G = Graphics.FromImage(bitmap))
G.CopyFromScreen(dstPoint, srcPoint,
copySize, CopyPixelOperation.SourceCopy);
e.Graphics.DrawImage(bitmap, 0, 0);
}
Shouldn't it be
e.Graphics.Clip = myRegion;
I'm hoping someone can give me some guidance here. I have been gogleing for a while now and I can't come up with anything that suits my needs. I'm a bit of a programmer but not a pro and I have no graphics experience. I am trying to develop a program for my wife to more easily transfer images to her needlepoint drawings. I want to write a C# application that will let me load an image of almost any type and overlay a "grid" on top of it. I want to also be able to implement simple "paint" operations like change the color of a grid square, color selector from the base image, bucket fill, etc. Any suggestions and examples would be greatly appreciated.
Thanks,
Tom
I've implemented something similar for my wife. My basic approach:
1) Scale the image down to the number of necessary pixels. For example, if she's stitching the image on a 10x10 13-mesh canvas, that equates to an image of 130x130 pixels.
Here's some example code to start you off:
// use NearestNeighbor algorithm
public static unsafe Bitmap Reduce(Bitmap source, SizeF toSize, int threadCount)
{
Bitmap reduced = new Bitmap((int)(toSize.Width * threadCount), (int)(toSize.Height * threadCount));
using (Graphics g = Graphics.FromImage(reduced))
{
g.InterpolationMode = InterpolationMode.NearestNeighbor;
g.DrawImage(source, new Rectangle(Point.Empty, reduced.Size));
}
return reduced;
}
2) Display the pixelated image full screen. This will provide a grid-like effect.
3) Display a color palette from DMC's yarn code card, or taken from the image (after down-scaling). Then have the mouse cursor pick up a color by clicking on it, then applying it to the cell that it was subsequently clicked on.
Here's some code for picking up the mouse cursor:
public Point GetPicturePointAtClick()
{
Point p = Cursor.Position;
Point picturePoint = previewBox.PointToClient(p);
if (Zoom != 0)
{
picturePoint.X = (int)(picturePoint.X / Zoom);
picturePoint.Y = (int)(picturePoint.Y / Zoom);
}
return picturePoint;
}
The idea here is to map the clicked area to the correct pixel in the reduced image, math:
Point reducedPoint =
new Point(
(int)(picPoint.X * (_reduced.Width / (float)WorkingBitmap.Width)),
(int)(picPoint.Y * (_reduced.Height / (float)WorkingBitmap.Height)));
There's a lot of code ahead of you. Did you try an online custom needlepoint provider? Try one of these sites, they're both pretty good and customization is free:
http://www.needlepaint.com/
http://www.pepitaneedlepoint.com/
I have an idea and maybe you guys can give me a good start or an idea in which path might be correct.
I have a picturebox right now loading a specific bmp file. What I want to do is load this bmp file into the picturebox and then load another picture on top of it. The kicker to this all is the 2nd picture must be drawn. The 2nd picture is just a fill in black box. This black box must also overlay on the first image exactly right, the black box has cordinates from paint on it (yes we have the # of the cordaints).
Still think the picturebox is the way to go, or is there a way to load paint into this, and then paint on top of the paint image?
1) Need to load an image
2) Need to read a specific file that has cords
3) Need to draw a black rectangle that matches those coords (Those cords were created in paint).
What do you think the best way to approach this is? A Picture box with code to draw in the cords of the redacted image
Here's a code sample that should do what you're after:
//Load in an image
pbTest.Image = Image.FromFile("c:\\Chrysanthemum.jpg");
//Create the graphics surface to draw on
using (Graphics g = Graphics.FromImage(pbTest.Image))
{
using (SolidBrush brush = new SolidBrush(Color.Black))
{
//Draw a black rectangle at some coordinates
g.FillRectangle(brush, new Rectangle(0, 0, 20, 10));
//Or alternatively, given some points
//I'm manually creating the array here to prove the point, you'll want to create your array from your datasource.
Point[] somePoints = new Point[] { new Point(1,1), new Point(20,25), new Point(35, 50), new Point(90, 100) };
g.FillPolygon(brush, somePoints);
}
}
The finished article:
This answer is written to apply to both web and non-web uses of C# (why I did not give specific examples.)
GDI and other graphics libs all have functions that will paint a filled rectangle on top of an image. This is the way to go. If you use two images there is a good chance for a standard user and a great chance for a hacker they will be able to view just the original image, exposing the information you are trying to hide.
If you only send an image with the areas redacted, you will never have to worry about them being seen.
I've got a situation where I need to resize a large number of images. These images are stored as .jpg files on the file system currently, but I expect to just have byte[] in memory later on in the project. The source image size is variable, but the output should be 3 different predetermined sizes. Aspect ratios should be preserved, padding the original image with white space (ie, a really tall image would be resized to fit within the square target image size, with large areas of white on the left and right).
I initially built the project targeting .NET 2.0, and using System.Drawing classes to perform the load/resize/save. Relevant code includes:
original = Image.FromFile(inputFile); //NOTE: Reused for each of the 3 target sizes
Bitmap resized = new Bitmap(size, size);
//Draw the image to a new image of the intended size
Graphics g = Graphics.FromImage(resized);
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.Clear(Color.White);
g.DrawImage(original, center - width / 2f, center - height / 2f, width, height);
g.Dispose();
//Save the new image to the output path
resized.Save(outputFile, ImageFormat.Jpeg);
I wanted to port this project to .NET 3.5, so tried using the System.Windows.Media classes to perform the same function. I got it working, however performance is terrible; processing time per image is about 50x longer. The vast majority of the time is spent loading the image. Relevant code includes:
BitmapImage original = new BitmapImage(); //Again, reused for each of the 3 target sizes
original.BeginInit();
original.StreamSource = new MemoryStream(imageData); //imageData is a byte[] of the data loaded from a FileStream
original.CreateOptions = BitmapCreateOptions.None;
original.CacheOption = BitmapCacheOption.Default;
original.EndInit(); //Here's where the vast majority of the time is spent
original.Freeze();
// Target Rect for the resize operation
Rect rect = new Rect(center - width / 2d, center - height / 2d, width, height);
// Create a DrawingVisual/Context to render with
DrawingVisual drawingVisual = new DrawingVisual();
using (DrawingContext drawingContext = drawingVisual.RenderOpen())
{
drawingContext.DrawImage(original, rect);
}
// Use RenderTargetBitmap to resize the original image
RenderTargetBitmap resizedImage = new RenderTargetBitmap(
size, size, // Resized dimensions
96, 96, // Default DPI values
PixelFormats.Default); // Default pixel format
resizedImage.Render(drawingVisual);
// Encode the image using the original format and save the modified image
SaveImageData(resizedImage, outputFile);
Am I doing something wrong here, to take so much time? I've tried just using the constructor on BitmapImage that takes a URI, same performance issue there. Anyone done anything like this before, know if there's a more performance-minded way to do this? Or am I just going to need to use System.Drawing still? Thanks!
And after typing all that up, it occurred to me that I could load the symbols from MS for the System.Windows.Media classes, and step through where it was slow. Immediately found the cause, and the solution. The input images were saved with a color profile, and it was attempting to load that color profile (from the file system) of each image. By switching from BitmapCreateOptions.None to BitmapCreateOptions.IgnoreColorProfile in the code above, it no longer does that, and performs just as fast as System.Drawing did.
Hope this helps anyone else that runs into this problem!
You appear to be doing this the hard way. You can let WPF do the work for you by just setting DecodePixelHeight and DecodePixelWidth. This will cause the resize to happen during the image load:
BitmapImage resizedImage = new BitmapImage
{
StreamSource = new MemoryStream(imageData),
CreateOptions = BitmapCreateOptions.IgnoreColorProfile,
DecodePixelHeight = height,
DecodePixelWidth = width,
}
resizedImage.BeginInit(); // Needed only so we can call EndInit()
resizedImage.EndInit(); // This does the actual loading and resizing
imageSaveImageData(resizedImage, outputFile);
I also included the IgnoreColorProfile solution you found in my code.
Update I reread your question and realized the reason you're using DrawingVisual is that you need whitespace around your image to make it square. DecodePixelHeight and DecodePixelWidth would not accomplish that goal, so my solution does not answer your question.
I will leave my answer here in case someone who just needs a resize without whitespace comes across this question.
I think this from the System.Drawing page on MSDN might be relevant:
The System.Drawing namespace provides access to GDI+ basic graphics functionality. More advanced functionality is provided in the System.Drawing.Drawing2D, System.Drawing.Imaging, and System.Drawing.Text namespaces.
The Graphics class provides methods for drawing to the display device. Classes such as Rectangle and Point encapsulate GDI+ primitives. The Pen class is used to draw lines and curves, while classes derived from the abstract class Brush are used to fill the interiors of shapes.
By using System.Drawing you are closer to the actual basic graphics functionality than if you go via System.Windows.Media which:
Defines objects that enable integration of rich media, including drawings, text, and audio/video content within Windows Presentation Foundation (WPF) applications.
System.Drawing is still supported, so I'd stick with that.
I found an interesting situation in your code. Remove using from following line:
using(DrawingContext drawingContext = drawingVisual.RenderOpen())
I'm not sure why this speed up code, but you can give it a try.