[C#] 動態產生文字圖片(Generated Image dynamic text)& 圖片疊加(Image Overlap)

在之前的例子中使用 WebCam QRCode Reader

在成功擷取圖片之後，會把圖片擷取下來

想說如果存下來的照片能有解碼的結果會更好

這邊需要兩個功能

一個是要能動態產生文字圖片 (Generated Image dynamic text)

一個是將兩張圖片做疊合 (Image Overlap)

有關對圖片做編輯或是其他相關的設定都是使用

Graphics 這個類別

要動態產生文字圖片其實很簡單

首先先準備一張底圖 (Background.png)

其實也可以依據各人喜歡在底圖上做些變化

        /// <summary>
        /// 動態在背景上Key上文字
        /// </summary>
        /// <param name="str"></param>
        /// <returns></returns>
        private Image GenerateFontMark(string str)
        {        
            //取得背景的底圖
            string path = _phtoDirectory + "Background.png";
            //讀取圖片
            System.Drawing.Image imgSrc = System.Drawing.Image.FromFile(path);

            using (Graphics g = Graphics.FromImage(imgSrc))
            {
                g.DrawImage(imgSrc, 0, 0, imgSrc.Width, imgSrc.Height);
                //文字要使用的字體及文字大小
                using (Font f = new Font("宋體", 13))
                {
                    using (Brush b = new SolidBrush(Color.Yellow))
                    {
                        //在圖片上加上文字
                        //(要加入的文字，字體，X軸位置，Y軸位置)
                        g.DrawString(str, f, b, 5, 5);
                    }
                }
            }

            return imgSrc;
        }

呼叫上面的Function就可以動態的產生文字圖片了

先來講對圖片縮放的小技巧
原本以為會很難，其實只要一行就可以改變圖片的大小
這邊縮小圖片是為了讓產生的圖片有邊框的效果

                //縮小照片尺寸
                //(要縮小的照片,寬度(Width),高度(Height))
                Image newPic = new Bitmap(frame.ToBitmap(), 630, 440);

做好底圖之後接著就是把拍下的結果疊在一起了

        private void GenerateWaterMark(Image tempPic, string result)
        {
            //在背景圖片中加上文字
            System.Drawing.Image imgSrc = GenerateFontMark(result);
            //要疊在上層的圖片
            System.Drawing.Image imgWarter = tempPic;

            //進行圖片的疊加 
            using (Graphics g = Graphics.FromImage(imgSrc))
            {
                //要疊的是哪張圖片
                g.DrawImage(imgWarter, 
                    //上層圖片從底圖的哪個位置開始疊(X,Y)
                    new Rectangle(5,35,imgWarter.Width,imgWarter.Height),
                    0, 0, imgWarter.Width, imgWarter.Height, GraphicsUnit.Pixel);
            }

            imgSrc.Save(_fileName);
        
        }

結果就是這樣

當然也可以用在之前產生 QRCode Generator
在產生QRCode時，把想要顯示的訊息一併列出來


DEMO