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;

Answer 1

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.

Answer 2

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");

Answer 3

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