ระหว่างที่กำลังทำฟีเจอร์แปลงภาพเป็นพิกเซลอาร์ตอยู่
ผมเลยคิดว่าถ้าแยกเฉพาะลอจิกการทำภาพเป็นพิกเซลออกมาเพื่อให้เอาไปใช้ซ้ำได้ก็น่าจะดี จึงสร้าง ไลบรารีสำหรับทำภาพเป็นพิกเซล ขึ้นมาครับ
คุณสมบัติ
- zero-dependency + ขนาดแพ็กเกจเล็ก (ประมาณ 44kB)
- ใช้งานได้ทั้งบนเบราว์เซอร์และ Node.js
- รองรับโหมดการทำภาพเป็นพิกเซล 2 แบบคือ
clean/detail - เลือกได้ว่าจะคงขนาดต้นฉบับไว้ หรือให้แสดงผลเป็นความละเอียดต่ำ
- แม้อ้างอิงที่ขนาด 512×512 ก็ยังประมวลผลได้ในระดับไม่กี่ ms
- แยกไปรันเป็น Worker บนเบราว์เซอร์ได้ง่าย จึงลดภาระต่อ UI แม้จะประมวลผลภาพหนัก ๆ
วิธีการทำงาน
cleanโหมด จะใช้สีที่ปรากฏบ่อยที่สุดในแต่ละเซลล์ ทำให้ขอบคมชัดdetailโหมด จะใช้สีเฉลี่ยของแต่ละเซลล์ ทำให้ยังคงไล่เฉดสีและพื้นผิวได้อย่างเป็นธรรมชาติมากขึ้นเล็กน้อย
ตัวอย่างการใช้งาน
import { pixelate } from 'fast-pixelizer'
const result = pixelate(imageData, { resolution: 32 })
// -> { data: Uint8ClampedArray, width, height }
ลิงก์
- npm: https://www.npmjs.com/package/fast-pixelizer
- GitHub: https://github.com/handsupmin/fast-pixelizer
ลองใช้งานกันได้ตามสบาย แล้วรบกวนช่วยส่งฟีดแบ็กมาด้วยนะครับ 🙂
ยังไม่มีความคิดเห็น