CoreBlack Software Studio
กรุณารอสักครู่...
discover
scroll to

Watermark Tools เครื่องมือเพิ่มลายน้ำให้กับรูปภาพ

Watermark Tools เครื่องมือเพิ่มลายน้ำให้กับรูปภาพ

รองรับรูปภาพโลโก้และลายน้ำแบบตัวอักษร

สวัสดีครับ วันนี้มีอีกหนึ่งผลงานมาอัพเดท นั่นก็คือ Watermark Tools – เครื่องมือเพิ่มลายน้ำให้กับรูปภาพ เป็นโปรเจ็คเล็กๆที่ทำด้วยโปรแกรมเมอร์ตัวคนเดียว และใช้เวลาในการทำเพียง 4-5 วันเท่านั้น แต่ในช่วงเวลาสั้นๆที่น้องๆในทีมได้ทำโปรเจ็คนี้ ก็มีเรื่องเล่าไม่น้อยเหมือนกันนะ ว่าแล้วเราไปดูกันดีกว่าว่าทำมีถึงเกิดเป็นโปรเจ็คนี้ขึ้น เนื่องจากทีมของเราได้มีการตกลง การเปลี่ยนแปลงรูปแบบการนำเสนอผลงาน ให้ดูเป็นกันเองมากขึ้น ทำให้เนื้อความและรูปแบบการเล่าเรื่องต่างๆ อาจจะแตกต่างไปจากเดิมนะครับ ดีไม่ดียังไงติชมกันได้เลยนะครับ

คุณเนสลูกค้าสุดน่ารักของเรา ที่ได้เปิดร้านกระบองเพรชและได้ชอบถ่ายรูปต้นไม้ในร้านเก็บไว้ ปลูกไปก็ถ่ายไปเรื่อยๆ จนวันหนึ่งไฟล์รูปก็เพิ่มมากขึ้น ในการจะนำรูปภาพไปใช้ใน Facebook และ Instragram ของร้านนั้น จะมีขั้นตอนนึงที่ต้องทำกับรูปผ่านเหล่านั้นก่อนซึ่งก็คือการใส่ลายน้ำให้กับรูปภาพ ซึ่งลายน้ำที่ว่าก็คือโลโก้ของร้านนั่นเอง (สำหรับใครที่ไม่รู้ว่าทำไมต้องใส่ลายน้ำ? การใส่ลายน้ำคือการทำสัญญาลักษณ์อย่างหนึ่งลงบนภาพ เพื่อแสดงความเป็นเจ้าของ และช่วยป้องกันการถูกนำรูปภาพนั้นไปใช้ต่อ หรือแอบอ้างโดยที่ไม่ได้รับอนุญาติ) แรกๆรูปไม่เยอะใช้แอพแต่งรูป หรือเข้าโปรแกรม Photoshop ก็พอทำได้ แต่หลังๆรูปที่ถ่ายไว้มีเป็นหลักพันรูป โดย 1 รูปใช้เวลาในการใส่ลายน้ำประมาณ 1 นาที คิดง่ายๆ 1000 รูปก็ใช้เวลา 16.6 ชั่วโมง แค่นั่งแต่งรูปใส่ลายน้ำก็หมดเวลาชีวิตไปแล้ว 1-2 วัน ของเขิงก็คงไม่ต้องกันกันละครับพี่น้อง นั่นหละครับทางลูกค้าจึงอยากได้เครื่องมือที่จะเอาไว้ช่วยให้สามารถใส่ลายน้ำได้ง่ายๆ ไม่ต้องเสียเวลาในชีวิตขนาดนี้

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

ขั้นตอนในการใช้งาน Watermark Tools ทางเราพยายามทำให้ทุกอย่างให้ใช้งานง่ายที่สุด ในส่วนของ Front-End เขียนด้วย Html+Bootstrap+JS และส่วนของ Back-end มีการใช้งาน Node.js เพื่อจัดการเรื่องการเข้าสู่ระบบและ Session ต่างๆ ไม่ได้ใช้เฟรมเวิร์คใดๆ โดยให้พ่อค้าแม่ค้าเลือกทุกรูปที่ตัวเองถ่ายดองเอาไว้ และเนื่องจากรูปภาพมีจำนวนมาก การที่เราจะให้พ่อค้าแม่ค้าอัพโหลดรูปภาพขึ้นเซิฟเวอร์อาจจะทำให้เปลืองพื้นที่และใช้เวลาค่อนข้างนานกว่าจะอัพโหลดเสร็จ เราจึงได้ทำการเลือกให้ประมวลผลบนเบราเซอร์ Client แทน (ดังนั้นแล้วจะกี่พันรูปก็มาเถอะถ้าแรมไม่เต็มซะก่อนนะ) Canvas คือคีย์เวิร์ดหลักของเราในงานนี้ ผลลัพท์ที่ได้หลักจากพัฒนาเสร็จค่อนข้างเป็นที่น่าพอใจ ผู้ใช้งานสามารถที่จะใส่ลายน้ำด้วยรูปภาพโลโก้ของร้าน ปรับไซส์ ความทึบความสว่าง หรือจะใส่เป็นข้อความก็ได้ โดยกำหนดข้อความ สีพื้นหลัง สีตัวอักษร หลังจากจัดวางตำแหน่งและตั้งค่าลายน้ำเสร็จแล้ว ก็คลิก”นำไปใช้กับรูปภาพทั้งหมด” รูปภาพทุกรูปที่เลือกไว้ก็จะมีลายน้ำแทรกตามที่เรากำหนด โดยทั้งหมดใช้เวลาประมวลผลเพื่อใส่ลายน้ำให้กับทุกรูป เพียง 1-2 วินาทีเท่านั้น จะกี่ร้อยรูปก็ 1-2 วินาทีเท่านั้น เทียบกับการเปิดแอพแล้วแก้ไขภาพทีละรูป คุณเนสบอกเลยว่า “ชีวิตดีขึ้นเยอะ ! 😍”

VIEW
CLOSE