How to get image in image?

Question

Just no idea how to do that:

We have one image, and we know constants WIDTH and HEIGHT of one card in this image. I would like to show one image in this image. Next constant is how many cards we have, so CNT_CARDS = 52. I don't want to create each card - only show that. I'm using winforms (C#).

Pseudocode

Load the image.

For each card can apply:

int offsetTop = row * HEIGHT;
int offsetLeft = column * WIDTH;
imageInImage.Location = new Point(offsetLeft, offsetTop);
imageInImage.Size = new Size(WIDTH, HEIGHT);

For example if we want to get Queen of diamond:

int offsetTop = 2 * HEIGHT;
int offsetLeft = 11 * WIDTH;

poker image

Why do you want to do this? You are essentially asking for the C# (sever-side) equivalent of a CSS sprite, right? I see no benefit to doing this as you are not gaining the advantage that CSS sprites offer which is a single download to the client's machine. You are already on the client's machine as a WinForms app. So is the only benefit that you will have one image instead of 52? — Karl Anderson, Jun 23 '13 at 14:21
I want to do this cause show one image instead 52. Really, this is the question for C#. This is a normally action in CSS, sure, but I need this situation solved in C#, if you understand. — RePRO, Jun 23 '13 at 14:28
No, I get that you want to do it in C# versus CSS, just wanted to know more of the motivations for doing it. Looks like you have some answers below to get you started. — Karl Anderson, Jun 23 '13 at 14:30
possible duplicate of: [How to cut a part of image in C#](http://stackoverflow.com/questions/9484935/how-to-cut-a-part-of-image-in-c-sharp) — djf, Jun 23 '13 at 14:31

score 5 · Accepted Answer · answered Jun 23 '13 at 14:29

Create a bitmap for a single card by using Graphics.DrawImage(). A boilerplate sample implementation could look like this:

    static Bitmap GetCardImage(Bitmap cards, int cardnum) {
        int width = cards.Width / 13;
        int height = cards.Height / 4;
        int left = width * (cardnum % 13);
        int top = height * (cardnum % 4);
        var bmp = new Bitmap(width, height,
            System.Drawing.Imaging.PixelFormat.Format32bppPArgb);
        using (var gr = Graphics.FromImage(bmp)) {
            gr.DrawImage(cards,
                new Rectangle(0, 0, width, height),
                new Rectangle(left, top, width, height),
                GraphicsUnit.Pixel);
        }
        return bmp;
    }

You can further extend this by creating an array of bitmaps so you'll have them readily available when you need to draw them. Something you'd do at the splash screen. Let's assume you added the image with the card faces as a resource named CardFaces:

    static Bitmap[] CreateDeckImages() {
        var deck = new Bitmap[52];
        using (var images = Properties.Resources.CardFaces) {
            for (int cardnum = 0; cardnum < deck.Length; ++cardnum) {
                deck[cardnum] = GetCardImage(images, cardnum);
            }
        }
        return deck;
    }

Untested, ought to be close.

score 1 · Answer 2 · answered Jun 23 '13 at 14:30

this should be a good start

        var bmp = new Bitmap(225, 315);
        var OriBmp = new Bitmap(@"c:\gnv4Q.jpg");
        var g = Graphics.FromImage(bmp);

        g.DrawImage(OriBmp,0,0,new Rectangle(225,315,225,315),GraphicsUnit.Pixel);

        bmp.Save(@"c:\test.png");

Aren Isa · Answer 3 · 2016-05-15T03:48:20.763

An alternative would be to split the image into a set of images, one image for each card.

ImageSplitter, is a website which currently has an online image splitting tool that can be used to efficiently split the OP's image into a set of images, one image for each card.

To note, since the image of the OP is 2925 by 1260 pixels, and the cards span 4 rows by 13 columns in the image, the result will be a set of 225 by 315 pixels sized card images downloaded in a zip file by using the online image splitting tool in discussion.

On the online image splitting tool website in discussion, you will currently find the option on the homepage to upload an image. Where you would find that, you may:
1. Click where it says "Click here to upload your image"
2. Click "UPLOAD IMAGE"
3. Once the image is uploaded, on the next screen, choose the "SPLIT IMAGE" tool
4. Then enter the number of Rows and Columns currently found on the tool
- for this image, enter '4' for Rows, and '13' for columns
5. Next, click "SPLIT IMAGE' currently found on the tool

By following steps 1 through 5 above, a set of images, one image for each card, contained in a zip file, will be downloaded in the download folder of the browser used for the online image splitting tool in duscussion.

Link to Visual Guide for the Online Image Splitting Tool

A link to a potential solution is always welcome, but please [add context around the link](//meta.stackoverflow.com/a/8259/169503) so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline. Take into account that being _barely more than a link to an external site_ is a possible reason as to [Why and how are some answers deleted?](//stackoverflow.com/help/deleted-answers). — Mogsdad, May 13 '16 at 22:20
I need a reputation of 10 to post images, and unfortunately I do not have that yet, so until then, please refer to the [Guide for the Online Image Splitting Tool](http://i.stack.imgur.com/ifJG5.png) — Aren Isa, May 14 '16 at 15:57

How to get image in image?

3 Answers3