將圖像和文本另存為一個

Question

我目前正在制作一個 MVC 項目，用戶將收到一個顯示在頁面上的證書。 證書是一個圖像，然后使用文本來重疊將打印用戶名和其他信息的圖像，使用 css 將文本格式化為圖像的正確部分。

由於圖像和文本在技術上仍然是分開的，因此保存圖像不會將文本保存在頂部，因此您保存的只是證書模板，沒有文本。

有沒有辦法將圖像和文本保存為一個，就好像文本被壓在圖像上並且是同一個對象？ 如果是這樣，我會很感激被指出正確的方向以知道如何做到這一點。 任何將圖像和文本另存為一個的想法或代碼都會非常有幫助。

謝謝。

Answer 1

可能這對你有幫助

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

這里需要注意的是，此圖像是縱向的A4尺寸紙張圖像。 您可能需要更改Bitmap picEdit = new Bitmap(PrePrintedCertificate, new System.Drawing.Size(1241, 1756)); Bitmap picEdit = new Bitmap(PrePrintedCertificate, new System.Drawing.Size(1756,1241));

另一件事是名稱和其他細節已隨機打印在圖像上，但您可以看到您希望打印細節的確切位置。

你可以使用g.DrawRectangle(new System.Drawing.Pen(System.Drawing.Color.Red, 2), 662, 530, 90, 40); 您將在此處傳遞的參數將與 RectangleF 參數相同。

Answer 2

將圖形另存為 SVG 並使用文本對象添加文本。

您還可以在 SVG 中使用 CSS 來設置文本樣式。

<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>