CODEWITHSUNDEEP
c#htmlcssmodel-view-controller
James Tordoff
James Tordoff

Reputation: 671

Save an image and text as one

I am currently making an MVC project where the User will receive a Certificate which is displayed on the page. The Certificate is an image and then Text is used to overlap the image where the Users name and other information will be printed, using css to format the text to the correct part of the image.

As the image and text are technically still separate, saving the image does not save the text on top so what you save is just the template of a certificate and no text.

Is there a way to save both image and text as one, as if the text was pressed onto the image and was the same object? If so, I would appreciate being pointed in the right direction to know how to do this. Any ideas or code to save an image and text as one it would be very helpful.

Thanks.

Upvotes: 2

Views: 201

Answers (2)

R Reveley
R Reveley

Reputation: 1584

Save the graphic as an SVG and add the text using a text object.

You can also use CSS within the SVG to style the text.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x="20" y="40">Example SVG text 1</text>
</svg>

Upvotes: 0

Mohit S
Mohit S

Reputation: 14064

May this help you 

private void makeCertificate(string name, string id, string otherDetails) //You can pass any other details as well 
{
    System.Drawing.Image PrePrintedCertificate;
    name = name.ToUpper();

    string PrePrintedCertificateName = "Certificate.jpg"; //Assuming Certificate JPG File is in the bin folder
    using (FileStream stream = new FileStream(PrePrintedCertificateName, FileMode.Open, FileAccess.Read))
    {
        PrePrintedCertificate = System.Drawing.Image.FromStream(stream);
    }

    RectangleF rectf4Name = new RectangleF(655, 460, 535, 90); //rectf for Name
    RectangleF rectf4ID = new RectangleF(655, 560, 400, 40); 
    System.Drawing.Rectangle rect;

    Bitmap picEdit = new Bitmap(PrePrintedCertificate, new System.Drawing.Size(1241, 1756));

    using (Graphics g = Graphics.FromImage(picEdit))
    {
        //g.DrawRectangle(new System.Drawing.Pen(System.Drawing.Color.Red, 2), 662, 530, 90, 40);
        //I have used upper line to see where is my RectangleF creating on the image
        g.SmoothingMode = SmoothingMode.AntiAlias;
        g.InterpolationMode = InterpolationMode.HighQualityBicubic;
        g.PixelOffsetMode = PixelOffsetMode.HighQuality;
        StringFormat sf = new StringFormat();
        sf.Alignment = StringAlignment.Center;
        StringFormat sf1 = new StringFormat();
        sf1.Alignment = StringAlignment.Near;

        //g.DrawImage(codeImage, rect); //If you wanted to draw another image on the certificate image
        g.DrawString(name, new System.Drawing.Font("Thaoma", 26, System.Drawing.FontStyle.Bold), System.Drawing.Brushes.Black, rectf4Name, sf);
        g.DrawString(Track.Text, new System.Drawing.Font("Thaoma", 14, System.Drawing.FontStyle.Bold), System.Drawing.Brushes.Black, rectf4ID, sf1);
    }
    try
    {
        if (File.Exists(id + ".jpg"))
            File.Delete(id + ".jpg");

        picEdit.Save(id + ".jpg", ImageFormat.Jpeg);
        picEdit.Dispose();
    }
    catch (Exception e)
    {
        MessageBox.Show(e.Message);
    }
}

Things to note here is that this image is a A4 size paper image with portrait orientation. You probably need to change Bitmap picEdit = new Bitmap(PrePrintedCertificate, new System.Drawing.Size(1241, 1756)); to Bitmap picEdit = new Bitmap(PrePrintedCertificate, new System.Drawing.Size(1756,1241));

Another thing is the names and other details has been printed on the image with random place but you can see where exactly you wish to print the details.

You can look where it will get printed using g.DrawRectangle(new System.Drawing.Pen(System.Drawing.Color.Red, 2), 662, 530, 90, 40); the Parameters you gonna pass here will be same as the RectangleF Parameters.

Upvotes: 2

Related Questions