How do I correctly transform an image in WPF?

Question

I want to write program that functions something like PhotoShop.

1.upload image

2. Then I want to do skew transform, But when I do transform I have a problem, my picture goes beyond the edge of the workspace. How do I transform without this problem(I think I should create a new Image every time I do a transform).

Then I crop, but crop makes the picture without transform. I think if I create a new image every time I do a transform, the problem will be fixed.

How do I do this correctly?

How do I correctly create this image in WPF? How to do transform and save an image? I am using(System.Drawing.Bitmap, System.Windows.Media.Imaging) Maybe, can someone show me experiences, code or useful material?

score 3 · Accepted Answer · edited May 23 '17 at 12:23

For the skew tranformation you may use MatrixTranform. Basic idea is described here

Below is the code that transforms an image located at "D:\input.png", attaches transformation result to the source of Image that defined in the .xaml file:

<Image Name="imgProcess" />

and writes result to the file "D:\skew.png"

        double skewX = .0;
        double skewY = Math.Tan(Math.PI / 18);
        MatrixTransform transformation = new MatrixTransform(1, skewY, skewX, 1, 0, 0)

        BitmapImage image = new BitmapImage(new Uri(@"D:\input.png"));
        var boundingRect = new Rect(0, 0, image.Width + image.Height * skewX, image.Height + image.Width * skewY);
        DrawingGroup dGroup = new DrawingGroup();
        using (DrawingContext dc = dGroup.Open())
        {
            dc.PushTransform(transformation);

            dc.DrawImage(image, boundingRect);
        }


        DrawingImage imageSource = new DrawingImage(dGroup);


        imgProcess.Source = imageSource;

        SaveDrawingToFile(ToBitmapSource(imageSource), @"D:\skew.png", (int)boundingRect.Width, (int)boundingRect.Height);

    private BitmapSource ToBitmapSource(DrawingImage source)
    {
        DrawingVisual drawingVisual = new DrawingVisual();
        DrawingContext drawingContext = drawingVisual.RenderOpen();
        drawingContext.DrawImage(source, new Rect(new Point(0, 0), new Size(source.Width, source.Height)));
        drawingContext.Close();

        RenderTargetBitmap bmp = new RenderTargetBitmap((int)source.Width, (int)source.Height, 96, 96, PixelFormats.Pbgra32);
        bmp.Render(drawingVisual);
        return bmp;
    }


    private void SaveDrawingToFile(BitmapSource image, string fileName, int width, int height)
    {
        var encoder = new PngBitmapEncoder();
        encoder.Frames.Add(BitmapFrame.Create(image));

        using (var stream = new FileStream(fileName, FileMode.Create))
        {
            encoder.Save(stream);
        }
    }

Results

How do I correctly transform an image in WPF?

1 Answers1