มาลองใส่ข้อความ/ภาพลายน้ำ(Watermark) บนรูปภาพที่เราอัพโหลดด้วย C# กันเถอะ

by
Post Views: 414

          ในการทำงานของนักพัฒนาโปรแกรม อาจจะมีบางงานที่มีความเกี่ยวข้องกับการบันทึกข้อมูลรูปภาพต่างๆลงบนเซิร์ฟเวอร์ และอาจมีความต้องการที่จะใส่ลายน้ำให้กับรูปภาพเหล่านั้น ซึ่งจริงๆแล้วการทำลายน้ำนั้น ถือเป็นกระบวนการหนึ่งในการคุ้มครองลิขสิทธิ์ ป้องกัน หรือปกป้องลิขสิทธิ์ของเจ้าของภาพผู้อัพโหลดข้อมูลหรือเป็นการแจ้งที่มาของภาพนั้นๆ เพื่อไม่ให้ผู้อื่นนำไปใช้ในทางมิชอบ และทำให้มั่นใจได้ว่าจะไม่สามารถนำกลับมาใช้ซ้ำหรือเปลี่ยนแปลงได้โดยไม่ได้รับอนุญาต นอกจากนี้ยังอาจใช้เป็นกลยุทธ์ในการสร้างแบรนด์ให้กับงานของคุณได้ หรืออาจทำหน้าที่เป็นตราประทับเพื่อระบุสถานะของเอกสารโดยมีคำเช่น “สำเนา” “ฉบับร่าง” หรือ “ตัวอย่าง” ซึ่งช่วยให้มั่นใจได้ว่าจะไม่มีการจัดการเอกสารสำคัญอย่างไม่ถูกต้อง อีกทั้งยังช่วยให้คุณสามารถจัดระเบียบงานของคุณได้ในขณะที่คุณทำเอกสารฉบับร่างให้เป็นเอกสารฉบับจริง

          และสำหรับในบทความนี้ทางผู้เขียนจึงถือโอกาสมาแนะนำวิธีการทำภาพลายน้ำให้กับรูปภาพที่เราบันทึกข้อมูลจากการอัพโหลดไฟล์โดยระบบที่พัฒนาขึ้นกันค่ะ โดยวิธีการเพิ่มลายน้ำสามารถทำได้หลายทาง อาจจะเป็นการนำรูปภาพทั้งหมดที่มีการอัพโหลดมาตกแต่งด้วยโปรแกรมตกแต่งภาพ แต่ในกรณีนี้ ผู้เขียนจะขอแนะนำวิธีเบื้องต้นในการพัฒนาโปรแกรมในการใส่ลายน้ำให้กับภาพตอนอัพโหลดไฟล์ด้วย C#  เพื่อเป็นแนวทางให้กับผู้อ่านได้นำไปต่อยอดงานพัฒนาของตนเองได้ ซึ่งในบทความนี้จะแบ่งวิธีที่มาแนะนำการใส่ลายน้ำให้กับรูปภาพที่อัพโหลดออกเป็น 2 แบบดังนี้ค่ะ

1.การใส่ลายน้ำแบบข้อความ โดยการทำลายน้ำด้วยวิธีนี้ เราจะต้องมีการระบุข้อความที่เราต้องการให้แสดงลายน้ำในภาพที่ทำการอัพโหลด ซึ่งขั้นตอนการทำลายน้ำ มีดังนี้

1.1 เพิ่ม Library ที่เกี่ยวข้องเพิ่มเติมเข้ามา

using System.IO;
using System.Drawing;

1.2 สร้างหน้าจอที่มี File upload และปุ่มเพื่อทำการอัพโหลดไฟล์

.aspx page

   <html >
        <head runat="server">
        <title></title>
        </head>
        <body>
                <form id="form1" runat="server">
                        <div><asp:FileUpload ID="FileUpload" runat="server" />
                        <asp:Button runat="server" Text="Upload" ID="btnSave" OnClick="btnSave_Click" />
                        </div>
                </form>
        </body>
    </html>

1.3 สร้างเมธอดที่ใช้ในการสร้างภาพลายน้ำ ที่ชื่อว่า AddTextWatermark() โดยมีพารามิเตอร์เป็นข้อความที่ต้องการให้แสดงเป็นลายน้ำ ดังนี้

Code C#

เมธอด AddTextWatermark

 protected void AddTextWatermark(string watermarkText)
        {
            ////รับพารามิเตอร์เป็นข้อความที่ต้องการแสดงผล ในชื่อตัวแปร watermarkText 
            ////สร้างตัวแปรรูปภาพที่ได้จากการอัพโหลดไฟล์โดยผู้ใช้งาน ในชื่อตัวแปร image
            System.Drawing.Image image = System.Drawing.Image.FromStream(FileUpload.PostedFile.InputStream);

            ////หาค่าความกว้างและความสูงของภาพที่อัพโหลดใส่ตัวแปร w และ h
            int w = image.Width;
            int h = image.Height;

            ////สร้างตัวแปรชื่อรูปภาพที่จะบันทึกใหม่จากการรอัพโหลดไฟล์โดยผู้ใช้งาน ในชื่อตัวแปร genName
            string genName = Guid.NewGuid().ToString() + Path.GetExtension(FileUpload.PostedFile.FileName);

            ////สร้างตัวแปร Bitmap ในชื่อ bmp และระบุค่าความสูงและความกว้างตามภาพที่ได้ทำการอัพโหลด 
            System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(w, h);

            ////กำหนดค่าต่างๆให้กับ Graphics ในตัวแปรที่ชื่อว่า g จากตัวแปร Bitmap ที่สร้างไว้
            System.Drawing.Graphics g = System.Drawing.Graphics.FromImage((System.Drawing.Image)bmp);
            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
            g.Clear(System.Drawing.Color.Transparent);
            g.DrawImage(image, 0, 0, w, h);

            ////กำหนดขนาดของตัวอักษร และค่าต่างๆในการแสดงผลของตัวอักษรของข้อความ
            System.Drawing.Font drawFont = new System.Drawing.Font("Arial", 30, FontStyle.Bold, GraphicsUnit.Pixel);

            ////หาขนาดของข้อความ ตามค่าตัวอักษร(font)ที่ระบุข้างต้น
            SizeF textSize = new SizeF();
            textSize = g.MeasureString(watermarkText, drawFont);

            /////กำหนดสีของข้อความที่ต้องการทำลายน้ำและการกำหนดสีแบบ transparency
            System.Drawing.SolidBrush drawBrush = new System.Drawing.SolidBrush(Color.FromArgb(200, 211, 211, 211));

            /////กำหนดจุดหมุนจากจุดกึ่งกลางภาพ และหมุนให้ข้อความเอียง 45 องศา
            g.TranslateTransform(bmp.Width / 2, bmp.Height / 2);
            g.RotateTransform(45);

            ////ระบุข้อความ ลักษณะตัวอักษร สีและตำแหน่งในการวางข้อความลงบนรูปภาพที่กำหนด โดยจะกำหนดให้อยู่กึ่งกลางภาพแบบทะแยงมุม 45 องศา
            g.DrawString(watermarkText, drawFont, drawBrush, -(textSize.Width / 2), -(textSize.Height / 2));
            System.Drawing.Image newImage = (System.Drawing.Image)bmp;

            ////บันทึกภาพไปยังที่อยู่ไฟล์ที่ระบุ
            newImage.Save(Server.MapPath("~/Uploads/" + genName));
            g.Dispose();
        }

เรียกใช้เมธอดเมื่อกดปุ่ม Upload โดยส่งพารามิเตอร์เป็นข้อความที่ต้องการให้แสดงลายน้ำบนภาพไป

protected void btnSave_Click(object sender, EventArgs e)
{
      AddTextWatermark("Copyrights (c) 2023");
}

ผลลัพธ์ตัวอย่าง

เพิ่มเติม

  1. หากต้องการเปลี่ยนตำแหน่งของภาพลายน้ำ สามารถทำได้หลายแบบ โดยผู้เขียนจะขอยกตัวอย่างกรณีที่ต้องการให้ภาพลายน้ำอยู่ตำแหน่งขวาล่าง ซึ่งปรับแก้เพิ่มเติม ดังนี้
    เปลี่ยนจาก
    /////กำหนดจุดหมุนจากจุดกึ่งกลางภาพ และหมุนให้ข้อความเอียง 45 องศา
    g.TranslateTransform(bmp.Width / 2, bmp.Height / 2);
    g.RotateTransform(45);

    ////ระบุข้อความ ลักษณะตัวอักษร สีและตำแหน่งในการวางข้อความลงบนรูปภาพที่กำหนด โดยจะกำหนดให้อยู่กึ่งกลางภาพแบบทะแยงมุม 45 องศา
    g.DrawString(watermarkText, drawFont, drawBrush, -(textSize.Width / 2), -(textSize.Height / 2));
    System.Drawing.Image newImage = (System.Drawing.Image)bmp;
    เป็น 
    Point position = new Point((bmp.Width – ((int)textSize.Width + 10)), (bmp.Height – ((int)textSize.Height + 10)));

    ////ระบุข้อความ ลักษณะตัวอักษร สีและตำแหน่งในการวางข้อความลงบนรูปภาพที่กำหนด โดยจะกำหนดให้อยู่ขวาล่างแทน
    g.DrawString(watermarkText, drawFont, drawBrush, position);
    แทน
  2. ในการนำไปใช้งานจริง ในส่วนของตำแหน่ง สีและขนาดตัวอักษร ท่านสามารถระบุได้ตามความเหมาะสมเพื่อให้รองรับกับการใช้งานจริง ในตัวอย่างเป็นเพียงกรณีศึกษาเท่านั้นค่ะ

ตัวอย่างผลลัพธ์หลังมีการปรับตำแหน่งการแสดงผลลายน้ำ

2.การใส่ลายน้ำด้วยรูปภาพ หลังจากที่เราได้ลองทำลายน้ำบนภาพด้วยข้อความกันไปแล้ว คราวนี้เราจะลองแบบกรณีที่ต้องการให้นำภาพมาเป็นลายน้ำบนรูปภาพที่ทำการอัพโหลดกันบ้างค่ะ โดยมีวิธี ดังนี้นะคะ

Code C#

เมธอด AddImageWatermark

   protected void AddImageWatermark(string watermarkImagePath)
        {
            try {
                ////สร้างตัวแปรชื่อรูปภาพที่จะบันทึกใหม่จากการรอัพโหลดไฟล์โดยผู้ใช้งาน ในชื่อตัวแปร genName
                string genName = Guid.NewGuid().ToString() + Path.GetExtension(FileUpload.PostedFile.FileName);

                ////ประกาศตัวแปรของไฟล์รูปภาพที่ทำการอัพโหลด
                using (Bitmap image = (Bitmap)System.Drawing.Image.FromStream(FileUpload.PostedFile.InputStream))

                ////ประกาศตัวแปรไฟล์ภาพที่ต้องการนำมาทำเป็นภาพลายน้ำ
                using (System.Drawing.Image watermarkImage = System.Drawing.Image.FromFile(watermarkImagePath))

                using (Graphics imageGraphics = Graphics.FromImage(image))
                using (TextureBrush watermarkBrush = new TextureBrush(watermarkImage))
                {
                    ////หาจุดตำแหน่งกึ่งกลางภาพที่ต้องการวางภาพลายน้ำ
                    int x = (image.Width / 2 - watermarkImage.Width / 2);
                    int y = (image.Height / 2 - watermarkImage.Height / 2);
                    watermarkBrush.TranslateTransform(x, y);
                    imageGraphics.FillRectangle(watermarkBrush, new Rectangle(new Point(x, y), new Size(watermarkImage.Width + 1, watermarkImage.Height)));

                    ////บันทึกรูปภาพตามที่อยู่(Path)ที่ระบุ
                    image.Save(Server.MapPath("~/Uploads/" + genName));
                }
            }
            catch (Exception ex)
            {
                ////แสดงข้อความแจ้งเตือนกรณีที่พบข้อผิดพลาดระหว่างดำเนินการ
                Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "alert", "alert('ไม่สามารถอัพโหลดไฟล์และทำลายน้ำภาพดังกล่าวได้" + ex.Message + "')", true);
            }
           
        }

เรียกใช้เมธอดเมื่อกดปุ่ม Upload โดยส่งพารามิเตอร์เป็นที่อยู่ของภาพที่ต้องการให้แสดงลายน้ำบนภาพไป

protected void btnSave_Click(object sender, EventArgs e) 
{ 
     string strWaterMark = HttpContext.Current.Server.MapPath("~/images/preview.png");  
     AddImageWatermark(strWaterMark); 
}

ผลลัพธ์ตัวอย่าง

หมายเหตุ : หน้า aspx ที่ใช้จะเป็นแบบเดียวกับวิธีที่ 1 (การทำลายน้ำแบบข้อความ) แต่จะแตกต่างกันเฉพาะในส่วนของการทำงานใน btnSave_Click ที่มีการเรียกใช้เมธอดและส่งค่าพารามิเตอร์ต่างกันค่ะ

                และทั้งหมดนี้ ก็เป็นวิธีการใส่ลายน้ำในเบื้องต้น ที่ผู้อ่านสามารถนำไปประยุกต์ใช้ให้เข้ากับงานของท่านได้ตามความสะดวกและความถนัดของแต่ละคน เพื่อให้รูปภาพ.o’kของเรามีลายน้ำได้โดยง่าย โดยที่ไม่ต้องเสียเวลามานั่งปรับแต่งรูปเองในภายหลังให้วุ่นวายกันค่ะ แต่ในการใช้งานจริง ผู้ใช้อาจจะต้องปรับค่าต่างๆให้เหมาะสมกับงานที่ใช้ เช่น ขนาดหรือสีตัวอักษร หรือขนาด/สีของรูปภาพที่ใช้เป็นลายน้ำ เพื่อให้ผลลัพธ์ของภาพลายน้ำออกมาสวยงาม และเหมาะสมไม่บดบังตัวภาพจริงจนเกินไปนะคะ ผู้เขียนหวังว่าเนื้อหาบทความนี้จะเป็นประโยชน์ให้กับนักพัฒนาที่กำลังตามหาวิธีการนี้กันอยู่นะคะหากมีคำแนะนำเพิ่มเติม สามารถชี้แนะเพื่อเป็นประโยชน์ร่วมกันได้ค่ะ ขอบคุณค่ะ

แหล่งอ้างอิง