[C# Graphics] Afbeelding in nieuwe afbeelding plakken

[PdeBie]

Hoi allen,

Hoop dat ik het een beetje duidelijk uitgelegd krijg.
Ik heb een afbeelding welke ik in een nieuw te maken afbeelding wil plakken.
De nieuwe afbeelding is een frame van 420x100 pixels en daar moet de andere afbeelding in terecht komen.

Hiervoor heb ik onderstaande code tot dusver:

C:

//using SD = System.Drawing;

using (SD.Image OriginalImage = SD.Image.FromFile(physicalpath + filename))
{
    using (SD.Bitmap frame = new SD.Bitmap(420, 100))
    {
        using (SD.Graphics Graphic = SD.Graphics.FromImage(frame))
        {
            Graphic.SmoothingMode = SmoothingMode.HighQuality;
            Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
            Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
            Graphic.DrawImage(frame, new SD.Rectangle(0, 0, 420, 100), new SD.Rectangle(0, 0, 420, 100), SD.GraphicsUnit.Pixel);
            Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, imageWidth, imageHeight), new SD.Rectangle(0, 0, imageWidth, imageHeight), SD.GraphicsUnit.Pixel);
            MemoryStream ms = new MemoryStream();
            frame.Save(ms, OriginalImage.RawFormat);
        }
    }
}

Nu schrijft hij echter alleen de originele afbeelding weg en niet de versie incl. het frame er omheen.

Iemand een idee?

[Verwijderd]

Hoe groot is je originele afbeelding?

[PdeBie]

maximaal 420x100 pixels.

[naam]

Doe je de volgorde niet verkeerd? Eerst het frame schrijven en vervolgens de originele afbeelding eroverheen plakken.

C#:

Graphic.DrawImage(frame, new SD.Rectangle(0, 0, 420, 100), new SD.Rectangle(0, 0, 420, 100), SD.GraphicsUnit.Pixel);
Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, imageWidth, imageHeight), new SD.Rectangle(0, 0, imageWidth, imageHeight), SD.GraphicsUnit.Pixel); 

Naar:

C#:

Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, imageWidth, imageHeight), new SD.Rectangle(0, 0, imageWidth, imageHeight), SD.GraphicsUnit.Pixel); 
Graphic.DrawImage(frame, new SD.Rectangle(0, 0, 420, 100), new SD.Rectangle(0, 0, 420, 100), SD.GraphicsUnit.Pixel);

[PdeBie]

frame is de achtergrond van 420x100 en OriginalImage de foto.
Dan moet ik toch eerst frame tekenen en dan OriginalImage?

C#:

Graphic.DrawImage(frame, new SD.Rectangle(0, 0, 420, 100), new SD.Rectangle(0, 0, 420, 100), SD.GraphicsUnit.Pixel);
Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, imageWidth, imageHeight), new SD.Rectangle(0, 0, imageWidth, imageHeight), SD.GraphicsUnit.Pixel); 

[nst6ldr]

pdebie schreef op woensdag 21 december 2011 @ 11:59:
frame is de achtergrond van 420x100 en OriginalImage de foto.
Dan moet ik toch eerst frame tekenen en dan OriginalImage?

C#:

Graphic.DrawImage(frame, new SD.Rectangle(0, 0, 420, 100), new SD.Rectangle(0, 0, 420, 100), SD.GraphicsUnit.Pixel);
Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, imageWidth, imageHeight), new SD.Rectangle(0, 0, imageWidth, imageHeight), SD.GraphicsUnit.Pixel); 

Als je het nou eerst even probeert...

[naam]

pdebie schreef op woensdag 21 december 2011 @ 11:59:
frame is de achtergrond van 420x100 en OriginalImage de foto.
Dan moet ik toch eerst frame tekenen en dan OriginalImage?

C#:

Graphic.DrawImage(frame, new SD.Rectangle(0, 0, 420, 100), new SD.Rectangle(0, 0, 420, 100), SD.GraphicsUnit.Pixel);
Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, imageWidth, imageHeight), new SD.Rectangle(0, 0, imageWidth, imageHeight), SD.GraphicsUnit.Pixel); 

Als je een frame om de afbeelding heen wilt hebben, dan zal je eerst de afbeelding moeten wegschrijven en vervolgens het frame eroverheen plakken, wil je een frame om de afbeelding heen hebben, dan zal je het frame groter moeten maken en de afbeelding in het midden ervan plakken.

[PdeBie]

hmm.. misschien even iets duidelijker uitleggen nog

het frame moet een witte achtergrond worden van 420x100 pixels. Deze waarden staan vast.
De foto (original image) kan verschillen qua grootte (met een max van 420x100) en moet op die witte achtergrond komen.
De afbeelding die uiteindelijk gemaakt moet worden is een banner van 420x100 pixels met daarin de foto.

Hoop dat ik het zo iets duidelijker uitgelegd heb

--edit--
volgens mij moet ik niet van DrawImage gebruik maken voor het frame, maar van DrawRectangle.
Heb nu het volgende gedaan:

C#:

Graphic.DrawRectangle(new SD.Pen(SD.Color.White), new SD.Rectangle(0, 0, 420, 100));
Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, imageWidth, imageHeight), new SD.Rectangle(0, 0, imageWidth, imageHeight), SD.GraphicsUnit.Pixel);                            

Maar dit wordt uiteindelijk nog niet goed weggeschreven.

[ Voor 36% gewijzigd door PdeBie op 21-12-2011 12:08 ]

[naam]

Ah, op die manier. Ik dacht dat je een afbeelding met een frame eroverheen had willen hebben, als een kerstkaart.

Kan je misschien een voorbeeld afbeelding geven van het resultaat wat je nu krijgt, en misschien met fotoshop/paint wat je als resultaat zou willen?

[Ventieldopje]

Is je orginele afbeelding niet gewoon even groot als het frame en wat gebeurt er als je het tekenen van de afbeelding uit comment en dus alleen het frame tekent?

[ Voor 75% gewijzigd door Ventieldopje op 21-12-2011 12:15 ]

[PdeBie]

naam schreef op woensdag 21 december 2011 @ 12:10:
Kan je misschien een voorbeeld afbeelding geven van het resultaat wat je nu krijgt, en misschien met fotoshop/paint wat je als resultaat zou willen?

links zie je de originele foto (wat ben ik toch een fotomodel ) en rechts zie je de afbeelding die ervan gemaakt moet worden. Een wit vlak van 420x100 pixels met daarin de foto.
De positie van de foto komt later wel. Dat wordt spelen met de coordinaten, maar dat is voor latere zorg.

Ventieldopje schreef op woensdag 21 december 2011 @ 12:11:
Is je orginele afbeelding niet gewoon even groot als het frame en wat gebeurt er als je het tekenen van de afbeelding uit comment en dus alleen het frame tekent?

Nee, de afbeelding is kleiner.
Het frame alleen tekenen zonder foto ga ik proberen.

[ Voor 23% gewijzigd door PdeBie op 21-12-2011 12:20 ]

[naam]

Als ik het op deze manier doe:

C#:

using (SD.Image OriginalImage = SD.Image.FromFile(@"C:\Users\naam\AppData\Local\Temp\img.jpg"))
            {
                using (SD.Bitmap frame = new SD.Bitmap(420, 100))
                {
                    using (SD.Graphics Graphic = SD.Graphics.FromImage(frame))
                    {
                        Graphic.SmoothingMode = SmoothingMode.HighQuality;
                        Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
                        Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
                        Graphic.DrawImage(frame, new SD.Rectangle(0, 0, 420, 100), new SD.Rectangle(0, 0, 420, 100), SD.GraphicsUnit.Pixel);
                        Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, 420, 100), new SD.Rectangle(0, 0, 420, 100), SD.GraphicsUnit.Pixel);
                        MemoryStream ms = new MemoryStream();
                        frame.Save(ms, OriginalImage.RawFormat);
                        ms.WriteTo(new FileStream(@"C:\Users\naam\AppData\Local\Temp\test.jpg", FileMode.CreateNew));
                    }
                }
            }

Dan krijg ik een bestand wat er als volgt uit ziet:


Dit lijkt me wat je wilt? Alleen is de achtergrond nu zwart.

[Ventieldopje]

C#:

Graphic.DrawImage(frame, new SD.Rectangle(0, 0, 420, 100), new SD.Rectangle(0, 0, 420, 100), SD.GraphicsUnit.Pixel);

Moet dit niet ook gewoon een FillRectangle zijn met de kleur wit?

[naam]

C#:

using (SD.Image OriginalImage = SD.Image.FromFile(@"C:\Users\naam\AppData\Local\Temp\img.jpg"))
            {
                using (SD.Bitmap frame = new SD.Bitmap(420, 100))
                {
                    using (SD.Graphics Graphic = SD.Graphics.FromImage(frame))
                    {
                        Graphic.SmoothingMode = SmoothingMode.HighQuality;
                        Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
                        Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
                        Graphic.FillRectangle(new SolidBrush(Color.White), new Rectangle(0, 0, 420, 100));
                        int ww = (frame.Width - OriginalImage.Width) / 2;
                        int hh = (frame.Height - OriginalImage.Height) / 2;
                        Graphic.DrawImage(OriginalImage, new Rectangle(ww, hh, 420, 100), new Rectangle(0, 0, 420, 100), GraphicsUnit.Pixel);
                        MemoryStream ms = new MemoryStream();
                        frame.Save(ms, OriginalImage.RawFormat);
                        ms.WriteTo(new FileStream(@"C:\Users\naam\AppData\Local\Temp\test.png", FileMode.Create));
                    }
                }
            }

Zo werkt het.

[PdeBie]

Ja. helemaal top. zo werkt hij inderdaad
Nu nog de gebruiker de positie laten bepalen, maar dat komt wel goed. Daar ga ik iets voor bedenken met jQuery.

Maar inderdaad, FillRectangle() was de functie die ik nodig had voor het 'frame'.

Dank u allen voor het mee denken.

[PdeBie]

Nog even voor de volledigheid en als dank voor de hulp.
Voor het bepalen van de coordinaten van de afbeelding op het witte vlak gebruik ik een stukje jQuery, middels de draggable() functie uit de jQuery UI library.

JavaScript:

$('#<%= SmallImage.ClientID %>')
                .draggable( { containment: "#containment-wrapper", scroll: false } )
                .bind("dragstop", 
                    function(event, ui) { 
                        $('#<%= posX.ClientID %>').val(ui.position.left);
                        $('#<%= posY.ClientID %>').val(ui.position.top);
                        }
                     );

SmallImage is de image welke je op het vlak wilt plakken.
#containment-wrapper is een div van 420x100 px, waarin je de afbeelding kan slepen om de positie te bepalen.
posX en posY zijn hiddenfields welke ik in de code-behind als volgt toepas:

C#:

int x = int.Parse(posX.Value);
int y = int.Parse(posY.Value);
                            
Graphic.DrawImage(OriginalImage, new SD.Rectangle(x, y, 420, 100), new SD.Rectangle(0, 0, 420, 100), SD.GraphicsUnit.Pixel);

Zodoende kan je zelf bepalen waar de foto in het witte vlak komt te staan