ในการทำงานของนักพัฒนาโปรแกรม อาจจะมีบางงานที่มีความเกี่ยวข้องกับการบันทึกข้อมูลรูปภาพต่างๆลงบนเซิร์ฟเวอร์ และอาจมีความต้องการที่จะใส่ลายน้ำให้กับรูปภาพเหล่านั้น ซึ่งจริงๆแล้วการทำลายน้ำนั้น ถือเป็นกระบวนการหนึ่งในการคุ้มครองลิขสิทธิ์ ป้องกัน หรือปกป้องลิขสิทธิ์ของเจ้าของภาพผู้อัพโหลดข้อมูลหรือเป็นการแจ้งที่มาของภาพนั้นๆ เพื่อไม่ให้ผู้อื่นนำไปใช้ในทางมิชอบ และทำให้มั่นใจได้ว่าจะไม่สามารถนำกลับมาใช้ซ้ำหรือเปลี่ยนแปลงได้โดยไม่ได้รับอนุญาต นอกจากนี้ยังอาจใช้เป็นกลยุทธ์ในการสร้างแบรนด์ให้กับงานของคุณได้ หรืออาจทำหน้าที่เป็นตราประทับเพื่อระบุสถานะของเอกสารโดยมีคำเช่น “สำเนา” “ฉบับร่าง” หรือ “ตัวอย่าง” ซึ่งช่วยให้มั่นใจได้ว่าจะไม่มีการจัดการเอกสารสำคัญอย่างไม่ถูกต้อง อีกทั้งยังช่วยให้คุณสามารถจัดระเบียบงานของคุณได้ในขณะที่คุณทำเอกสารฉบับร่างให้เป็นเอกสารฉบับจริง
และสำหรับในบทความนี้ทางผู้เขียนจึงถือโอกาสมาแนะนำวิธีการทำภาพลายน้ำให้กับรูปภาพที่เราบันทึกข้อมูลจากการอัพโหลดไฟล์โดยระบบที่พัฒนาขึ้นกันค่ะ โดยวิธีการเพิ่มลายน้ำสามารถทำได้หลายทาง อาจจะเป็นการนำรูปภาพทั้งหมดที่มีการอัพโหลดมาตกแต่งด้วยโปรแกรมตกแต่งภาพ แต่ในกรณีนี้ ผู้เขียนจะขอแนะนำวิธีเบื้องต้นในการพัฒนาโปรแกรมในการใส่ลายน้ำให้กับภาพตอนอัพโหลดไฟล์ด้วย 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");
}
ผลลัพธ์ตัวอย่าง
เพิ่มเติม
- หากต้องการเปลี่ยนตำแหน่งของภาพลายน้ำ สามารถทำได้หลายแบบ โดยผู้เขียนจะขอยกตัวอย่างกรณีที่ต้องการให้ภาพลายน้ำอยู่ตำแหน่งขวาล่าง ซึ่งปรับแก้เพิ่มเติม ดังนี้
เปลี่ยนจาก
/////กำหนดจุดหมุนจากจุดกึ่งกลางภาพ และหมุนให้ข้อความเอียง 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.การใส่ลายน้ำด้วยรูปภาพ หลังจากที่เราได้ลองทำลายน้ำบนภาพด้วยข้อความกันไปแล้ว คราวนี้เราจะลองแบบกรณีที่ต้องการให้นำภาพมาเป็นลายน้ำบนรูปภาพที่ทำการอัพโหลดกันบ้างค่ะ โดยมีวิธี ดังนี้นะคะ
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ของเรามีลายน้ำได้โดยง่าย โดยที่ไม่ต้องเสียเวลามานั่งปรับแต่งรูปเองในภายหลังให้วุ่นวายกันค่ะ แต่ในการใช้งานจริง ผู้ใช้อาจจะต้องปรับค่าต่างๆให้เหมาะสมกับงานที่ใช้ เช่น ขนาดหรือสีตัวอักษร หรือขนาด/สีของรูปภาพที่ใช้เป็นลายน้ำ เพื่อให้ผลลัพธ์ของภาพลายน้ำออกมาสวยงาม และเหมาะสมไม่บดบังตัวภาพจริงจนเกินไปนะคะ ผู้เขียนหวังว่าเนื้อหาบทความนี้จะเป็นประโยชน์ให้กับนักพัฒนาที่กำลังตามหาวิธีการนี้กันอยู่นะคะหากมีคำแนะนำเพิ่มเติม สามารถชี้แนะเพื่อเป็นประโยชน์ร่วมกันได้ค่ะ ขอบคุณค่ะ
แหล่งอ้างอิง