ตัวสร้าง BlurHash
เข้ารหัสรูปภาพเป็นสตริง BlurHash ขนาดเล็กสำหรับใช้เป็น placeholder และถอดรหัส BlurHash กลับมาเป็นพรีวิวสด ฟรี เร็ว ทำงานฝั่ง client 100%
Loading tool...
ตัวสร้าง BlurHash คืออะไร?
ตัวสร้าง BlurHash เข้ารหัสรูปภาพเป็นสตริง BlurHash ขนาดกะทัดรัด — การแทนค่าด้วย base83 ของสีหลักและ gradient ของภาพ — และถอดรหัสสตริง BlurHash กลับมาเป็นพรีวิวเบลอเรียบ ๆ ที่เรนเดอร์สดบน canvas BlurHash เป็น format placeholder มาตรฐานอุตสาหกรรม (สร้างโดย Wolt) ใช้แสดงคำใบ้ทางสายตาของรูปภาพทันทีระหว่างรอไฟล์จริงโหลด ช่วยยกระดับ perceived performance อย่างชัดเจน
ประโยชน์หลัก
- แสดง placeholder ของรูปภาพทันทีแทนกล่องว่างหรือ spinner
- สตริง hash สั้นกระทัดรัด (20-30 ตัวอักษร) เก็บใน database หรือฟิลด์ CMS ได้ง่ายมาก
- เข้ากันได้กับ library blurhash อย่างเป็นทางการบน web, iOS และ Android
- ปรับระดับรายละเอียดได้ แลกเปลี่ยนระหว่างคุณภาพกับความยาวสตริง
- ทำงานฝั่ง client ทั้งหมด รูปภาพไม่ออกจากเบราว์เซอร์ของคุณ
กรณีการใช้งาน
- •สร้าง placeholder แบบ blurDataURL สำหรับแกลเลอรีรูปใน Next.js หรือ React
- •เก็บพรีวิวรูปภาพขนาดเล็กไว้ใน response ของ API หรือ database
- •พรีวิวว่าสตริง BlurHash ที่มีอยู่จะดูเป็นอย่างไรก่อนเอาไปใช้จริง
- •จูนจำนวน component ให้ได้อัตราส่วนคุณภาพต่อความยาวที่ดีที่สุดสำหรับ layout
- •เรียนรู้ว่าการเข้ารหัส BlurHash ทำงานอย่างไรด้วยการเข้ารหัสและเทียบ hash
วิธีใช้ตัวสร้าง BlurHash
- อัปโหลดรูปภาพ: เลือกรูป JPG, PNG หรือ WebP ก็ได้ ประมวลผลในเบราว์เซอร์ของคุณทั้งหมด ไม่มีการส่งขึ้นเซิร์ฟเวอร์
- ตั้งค่าจำนวน Component: เลือก X component 1-9 ค่า ยิ่งเยอะยิ่งจับรายละเอียดได้ละเอียดแต่ hash จะยาวขึ้น ค่า 4 เป็นค่าเริ่มต้นที่ดี
- คัดลอกสตริง BlurHash: hash ที่เข้ารหัสแล้วจะแสดงทันทีพร้อมความยาวเป็นตัวอักษร คัดลอกไปใช้ในแอป, CMS หรือฟิลด์ฐานข้อมูลของคุณ
- ถอดรหัสและพรีวิว: วางสตริง BlurHash ใดก็ได้ (ของคุณหรือตัวอย่าง) ลงในช่อง decoder เพื่อเรนเดอร์พรีวิว placeholder แบบเบลอบน canvas สด
คุณสมบัติหลัก
- เข้ารหัสรูปภาพที่อัปโหลดเป็นสตริง BlurHash ขนาดกะทัดรัดในคลิกเดียว
- ถอดรหัส BlurHash กลับมาเป็นพรีวิวบน canvas ได้ทันที
- ปรับจำนวน component (1-9) เพื่อสมดุลระหว่างคุณภาพกับความยาวสตริง
- คัดลอก hash ได้พร้อมแสดงความยาว และเทียบกับรูปต้นฉบับแบบชิดกัน
- ประมวลผลบน canvas ฝั่ง client ล้วน ๆ ไม่ต้องอัปโหลด ไม่ใช้ API ใช้ได้ออฟไลน์
- อินเทอร์เฟซสองภาษา EN/TH พร้อม hash ตัวอย่างให้ลองเล่นทันที
คำถามที่พบบ่อย
สตริง BlurHash ใช้ทำอะไร?
BlurHash เป็นสตริงสั้นมาก (ปกติ 20-30 ตัวอักษร) ที่แทนสีและ gradient หลักของรูปภาพ แอปจะนำไป decode เป็นภาพเบลอแสดงเป็น placeholder ทันทีระหว่างรอรูปจริงโหลด ทำให้ interface รู้สึกเร็วขึ้นมาก
ควรตั้งค่า component กี่ตัว?
จำนวน component กำหนดระดับรายละเอียดที่ hash เก็บได้ 1-2 ตัวได้สีเฉลี่ยเรียบ ๆ, 3-4 ตัวจับ gradient หลัก (ค่าเริ่มต้นที่นิยม), ส่วน 6-9 ตัวเก็บโครงสร้างละเอียดขึ้นแต่สตริงยาวขึ้น เริ่มที่ 4 แล้วค่อยปรับตามชอบ
รูปภาพของฉันถูกอัปโหลดขึ้นเซิร์ฟเวอร์ไหม?
ไม่มีการอัปโหลด การเข้ารหัสและถอดรหัสทำงานในเบราว์เซอร์ของคุณทั้งหมดด้วยการประมวลผล pixel บน canvas รูปไม่ออกจากเครื่อง และเครื่องมือใช้งานได้แบบออฟไลน์เมื่อโหลดหน้าแล้ว
hash เหล่านี้ใช้กับ library อะไรได้บ้าง?
ผลลัพธ์เป็น format base83 มาตรฐาน BlurHash ของ Wolt จึงใช้ได้กับ blurhash, blurhash-react อย่างเป็นทางการ, Next.js Image placeholder รวมถึง implementation บน iOS และ Android โดยตรง
ทำไมพรีวิวที่ถอดรหัสดูแข็งหรือเรียบเกินไป?
พรีวิวสร้างจาก frequency component ที่เก็บใน hash เท่านั้น จึงละเอียดได้แค่เท่าจำนวน component ที่ตั้งไว้ ลองเข้ารหัสรูปต้นฉบับด้วย component มากขึ้นเพื่อให้ใกล้เคียงรูปจริง หรือลดลงเพื่อให้เบลอนุ่มขึ้น