รูปภาพและภาพถ่าย · โปรแกรมแปลงรูปภาพและคอมเพรสเซอร์
วิธีที่ canvas.toBlob แปลง PNG เป็น WebP ภายในเบราว์เซอร์ของคุณ
· มันทำงานอย่างไร
รูปแบบภาพ ผ้าใบ webp
ตัวแปลงรูปภาพของเบราว์เซอร์เป็นตัวถอดรหัส บิตแมป และตัวเข้ารหัสที่เชื่อมโยงเข้าด้วยกัน และห่วงโซ่ทั้งหมดถูกสร้างไว้ในเบราว์เซอร์ โพสต์นี้ติดตามหนึ่ง PNG ผ่านการถอดรหัส Canvas และ toBlob ไปยังไฟล์ WebP และจดบันทึกสิ่งที่สูญหายระหว่างทาง
WebP มาจากไหนเมื่อไม่มีเซิร์ฟเวอร์เกี่ยวข้อง — คำถามที่เป็นรูปธรรมเบื้องหลังตัวแปลงที่ทำงานแบบออฟไลน์
WebP ไม่ได้มาจากคิวการแปลงฝั่งเซิร์ฟเวอร์ เบราว์เซอร์ของคุณมีตัวถอดรหัสรูปภาพ พื้นผิวพิกเซลที่วาดได้ และตัวเข้ารหัสอยู่แล้ว ตัวแปลง ToolAcre เชื่อมต่อเข้าด้วยกัน นั่นคือสาเหตุที่ PNG สามารถแปลงในแท็บของคุณได้หลังจากที่ไซต์โหลดแล้ว “ไม่มีการอัปโหลด” หมายถึงรูปภาพต้นฉบับและผลลัพธ์การแปลง ไม่ใช่เว็บไซต์ที่ไม่มีกิจกรรมเครือข่ายเลย
ขั้นตอนที่หนึ่ง: การถอดรหัส — วิธีที่เบราว์เซอร์เปลี่ยน PNG ไบต์เป็นบิตแมป RGBA และเหตุใดทุกรูปแบบจึงกลายเป็นตารางเดียวกัน
ขั้นแรก PNG จะถูกถอดรหัสเป็นบิตแมปรูปภาพ การบีบอัด PNG ตัวเลือกจานสี และข้อมูลเมตาของสีจะกำหนดว่าไบต์จะกลายเป็นพิกเซลได้อย่างไร แต่ผืนผ้าใบจะทำงานบนแรสเตอร์ที่ถอดรหัส ไม่ใช่ในส่วนของไฟล์ PNG ภาพหน้าจอ 1600×900 ให้ผล 1.44 ล้านตำแหน่งพิกเซล แม้ว่าตัวไฟล์จะเล็กกว่ามากก็ตาม ToolAcre ใช้ createImageBitmap และบังคับใช้งบประมาณพิกเซล รูปภาพที่ถอดรหัสขนาดใหญ่เป็นปัญหาหน่วยความจำก่อนที่จะเป็นปัญหาในการอัปโหลด
ขั้นตอนที่สอง: แคนวาสเป็นพื้นที่จัดเตรียม — วาดบิตแมปลงบนผืนผ้าใบหรือ OffscreenCanvas ที่มีขนาดตรงกัน
บิตแมปถูกวาดลงในผืนผ้าใบหรือ OffscreenCanvas ด้วยขนาดเอาต์พุตที่ร้องขอ หากขนาดเหล่านั้นตรงกับแหล่งที่มาและไม่ได้เลือกการครอบตัด DrawImage จะแบ่งพิกเซลสำหรับการเข้ารหัส หากขนาดเปลี่ยนแปลง แคนวาสจะสุ่มตัวอย่างอีกครั้งและค่าพิกเซลอาจเปลี่ยนแปลงก่อนที่การเข้ารหัส WebP จะเริ่มต้น รูทีนการเรนเดอร์เดียวกันจะทำหน้าที่แสดงตัวอย่างเชิงโต้ตอบและเส้นทางของผู้ปฏิบัติงาน ป้องกันไม่ให้เอาต์พุตทั้งสองนั้นติดตามอัลกอริธึมที่ไม่เกี่ยวข้องกัน
ขั้นตอนที่สาม: toBlob ที่มีประเภทและคุณภาพ MIME — วิธีเลือกตัวเข้ารหัส ตัวเลขคุณภาพควบคุมอะไร และเหตุใดจึงถูกละเว้นสำหรับ PNG
บนผืนผ้าใบธรรมดา toBlob(callback, "image/webp", quality) ขอให้เบราว์เซอร์เข้ารหัส WebP และโทรกลับด้วย Blob ในกรณีที่ OffscreenCanvas ใช้งานได้ ToolAcre ใช้ ConvertToBlob({type,quality}) สำหรับงานเดียวกัน คุณภาพจะควบคุมตัวเข้ารหัสที่สูญเสีย ไม่ใช่คำมั่นสัญญาถึงจำนวนไบต์ที่เฉพาะเจาะจง การส่งออก PNG ไม่มีการสูญเสีย และพารามิเตอร์คุณภาพไม่ได้ตั้งค่าระดับการบีบอัดแบบ JPEG ตรวจสอบรูปแบบที่ส่งคืนจริงเสมอ เนื่องจากความพร้อมใช้งานของตัวเข้ารหัสขึ้นอยู่กับเบราว์เซอร์
สิ่งที่ไปป์ไลน์ละทิ้ง — ข้อมูลเมตา โปรไฟล์สี และความแม่นยำ 16-บิต และเหตุใดนั่นจึงเป็นคุณสมบัติของเทคนิคมากกว่าจุดบกพร่อง
การเข้ารหัสแรสเตอร์ที่ถอดรหัสแล้วอีกครั้งไม่สามารถรักษาข้อเท็จจริงทั้งหมดไว้ในคอนเทนเนอร์ PNG ดั้งเดิมได้ ชิ้นข้อความ ข้อมูลเมตาของกล้องหรือตัวแก้ไข รายละเอียดโปรไฟล์สีบางส่วน และความลึกของบิตของแหล่งที่มาอาจไม่รอดจากการเดินทางไปกลับของแคนวาส ช่อง 16-บิต จะไม่กลายเป็น 16-บิต WebP เพียงเพราะอินพุตส่งช่องเหล่านั้น WebP สามารถรักษาความโปร่งใสได้เมื่อตัวเข้ารหัสรองรับ ในขณะที่การส่งออก JPEG จำเป็นต้องเติมพื้นที่โปร่งใส ขนาดไฟล์เพียงอย่างเดียวไม่สามารถแสดงว่าการแปลงยังคงมีเส้นหรือสีที่ละเอียดอยู่หรือไม่
ตัวอย่างการทำงาน: 1.8 MB PNG ภาพหน้าจอไปยัง WebP — ติดตามไฟล์ผ่านสามขั้นตอนและอ่านผลลัพธ์
ลองพิจารณาภาพหน้าจอ 1.8 MB PNG ที่มีข้อความ การไล่ระดับสี และมุมโปร่งใส ถอดรหัส ปล่อยให้ขนาดไม่เปลี่ยนแปลง เลือก WebP ส่งออกและเปรียบเทียบขนาด Blob และประเภท MIME กับต้นฉบับ ขนาดผลลัพธ์เป็นการวัด ไม่สามารถคาดเดาได้: ภาพหน้าจอที่สะอาดอาจบีบอัดได้ดี ในขณะที่เนื้อหาที่มีเสียงดังอาจไม่ดี ซูมเข้าไปในสัญลักษณ์เล็กๆ และมุมโปร่งใสก่อนที่จะยอมรับไฟล์ที่มีขนาดเล็กกว่า หากข้อความ UI ที่คมชัดไม่ชัดเจน ให้คง PNG ไว้หรือปรับคุณภาพตัวเข้ารหัส แทนที่จะอ้างว่า WebP ดีกว่าเสมอ
สิ่งนี้ไม่ครอบคลุม เช่น ภาพเคลื่อนไหว รูปแบบที่เบราว์เซอร์ไม่สามารถถอดรหัสได้ และการตั้งค่าตัวเข้ารหัสที่ API ไม่เปิดเผย
ไปป์ไลน์นี้ไม่รับประกันการรักษาภาพเคลื่อนไหว การถอดรหัส HEIC ในทุกอุปกรณ์ หรือการควบคุมพารามิเตอร์การสุ่มตัวอย่างย่อยและความพยายามของตัวเข้ารหัส WebP เต็มรูปแบบ นอกจากนี้ยังไม่สามารถกู้คืนรายละเอียดที่สูญหายไปแล้วในแหล่งที่มา JPEG ด้วยการบันทึกเป็น PNG หรือ WebP การถอดรหัสซ้ำ /re-encode รอบสามารถสะสมการสูญเสียได้ เก็บต้นฉบับไว้ และใช้รูปแบบ input/output ที่สนับสนุน ซึ่งแสดงอยู่ในหน้าเครื่องมือจริง แทนที่จะถือว่าทุกรูปแบบที่ระบบปฏิบัติการของคุณรู้ว่าเป็นที่ยอมรับที่นี่
ประเด็นสำคัญ: สามขั้นตอน ไม่มีการอัปโหลด — วิธีที่ Image Converter & Compressor รันไปป์ไลน์นี้บนอุปกรณ์ของคุณ
กลไกคือการถอดรหัส → วาด → เข้ารหัส ดำเนินการกับเบราว์เซอร์ API และไม่มีการอัปโหลดรูปภาพ ToolAcre เปิดเผยรูปแบบและขนาดเป้าหมาย เพื่อให้คุณสามารถบอกได้ว่าคุณเพียงเปลี่ยนคอนเทนเนอร์หรือปรับขนาดพิกเซลด้วย ทดสอบภาพหน้าจอตัวแทนหนึ่งภาพใน Image Converter & Compressor ก่อนประมวลผลทั้งชุด จากนั้นตรวจสอบผลลัพธ์ที่ดาวน์โหลดตามขนาดที่ผู้คนจะเห็น