รูปภาพและภาพถ่าย · ตัวปรับขนาดรูปภาพโซเชียล
วิธีการปรับขนาดรูปภาพของเบราว์เซอร์: Canvas, DrawImage และ Resampling
· มันทำงานอย่างไร
การปรับขนาดภาพ ผ้าใบ การประมวลผลเบราว์เซอร์
เบราว์เซอร์สามารถถอดรหัสภาพถ่าย วาดลงในผืนผ้าใบในขนาดใหม่ และเข้ารหัสผลลัพธ์ ทั้งหมดนี้ทำได้โดยไม่ต้องใช้เซิร์ฟเวอร์ โพสต์นี้เป็นไปตามไปป์ไลน์นั้น อธิบายว่าคุณภาพได้หรือเสียที่ใด และแสดงให้เห็นว่าเหตุใดหน่วยความจำของอุปกรณ์ของคุณจึงจำกัดขนาดเพียงอย่างเดียว
ไม่มีการอัปโหลด ไม่มีเซิร์ฟเวอร์ ยังคงปรับขนาด — คำถามที่เป็นรูปธรรมว่างานจะเกิดขึ้นที่ใดเมื่อเพจย่อขนาดรูปภาพขนาด 20 ล้านพิกเซล
ภาพถ่ายสามารถกลายเป็นภาพบุคคล 1080 โดย 1350 ได้โดยไม่ต้องไปที่เซิร์ฟเวอร์ประมวลผลภาพ Social Image Resizer ได้รับไฟล์จากตัวเลือกเบราว์เซอร์ ตรวจสอบประเภทและขนาด MIME และเรียก createImageBitmap บิตแมปที่ถอดรหัสนั้นยังคงเป็นแหล่งที่มาของทุกเอาต์พุตที่เลือก ดังนั้นออบเจ็กต์ในเครื่องหนึ่งจึงสามารถป้อนแคนวาสที่มีรูปทรงแตกต่างกันหลายอันได้
การแสดงตัวอย่างที่มองเห็นได้ไม่ใช่การส่งออกขั้นสุดท้ายที่ซ่อนอยู่หลังคำขอเครือข่าย เป็นการเรนเดอร์ผืนผ้าใบขนาดเล็กกว่าในสถานะการจัดเฟรมเดียวกัน: อัตราส่วนเป้าหมาย การซูม ออฟเซ็ต โหมดพอดี และพื้นหลัง ส่งออกซ้ำในภายหลังซึ่งแสดงผลตามขนาดที่กำหนดไว้ล่วงหน้า เข้ารหัส Blob และมอบ Blob ให้กับส่วนควบคุมการดาวน์โหลดในหน้า
การถอดรหัสเป็นแบบท้องถิ่น แต่เครื่องมือนี้ยังบังคับใช้ขีดจำกัดอินพุต 40 MB อีกด้วย
แผนดังกล่าวระบุว่าหน่วยความจำอุปกรณ์เป็นเพียงขอบเขตในทางปฏิบัติ แต่พาธอินพุตที่จัดส่งก็มีขีดจำกัดไฟล์ 40 MB ที่ชัดเจนเช่นกัน JPEG, PNG และ WebP ได้รับการยอมรับ ประเภทอื่นๆ จะถูกปฏิเสธก่อนที่จะถอดรหัส หลังจากประตูนั้น createImageBitmap จะขอให้เบราว์เซอร์เปลี่ยนไบต์ของไฟล์ที่บีบอัดให้เป็นความกว้าง ความสูง และพิกเซลที่ถอดรหัสซึ่งใช้งานโดย Canvas
พิกเซลที่ถอดรหัสสามารถใช้หน่วยความจำได้มากกว่าไฟล์บีบอัด และแต่ละเอาต์พุตแคนวาสต้องมีการจัดสรรของตัวเอง ตัวเรนเดอร์จึงเรียกตัวป้องกันงบประมาณพิกเซลที่ใช้ร่วมกันก่อนสร้างแคนวาส นั่นเป็นข้อจำกัดประการที่สองเกี่ยวกับอุปกรณ์ ไม่ใช่การอนุญาตให้สัญญาว่าทุกไฟล์ที่ต่ำกว่า 40 MB จะพอดีกับทุกเอาต์พุตที่ร้องขอบนทุกเครื่อง
DrawImage จะปรับขนาดบิตแมปแบบเต็มตำแหน่งในขณะที่คลิปแคนวาสเอาต์พุตล้น
ToolAcre จะไม่คำนวณสี่เหลี่ยมครอบตัดต้นทาง และส่งอาร์กิวเมนต์ต้นทางและปลายทางแปดอาร์กิวเมนต์ไปยัง DrawImage โดยจะคำนวณมาตราส่วนจากมิติแหล่งที่มาและเป้าหมาย วางตำแหน่งบิตแมปที่ปรับขนาดทั้งหมด และวาดลงบนผืนผ้าใบที่มีขอบตัดส่วนที่ล้นออก ในโหมดหน้าปกที่การตัดนั้นเป็นการครอบตัด ในโหมดบรรจุ บิตแมปทั้งหมดยังคงมองเห็นได้
ความแตกต่างมีความสำคัญเนื่องจากการครอบตัดและการปรับขนาดไม่ใช่คำพ้องความหมาย การปรับขนาดจะเปลี่ยนขนาดที่บิตแมปถูกสุ่มตัวอย่าง การครอบตัดจะลบสิ่งใดก็ตามที่อยู่นอกกรอบเอาต์พุตที่มีขอบเขตจำกัด การเรียก DrawImage ครั้งหนึ่งสามารถมีส่วนร่วมในทั้งสองเอฟเฟกต์ได้ที่นี่ แต่การครอบตัดจะถูกสร้างขึ้นโดยเรขาคณิตของเฟรมและการตัดภาพ แทนที่จะเขียนไฟล์ต้นฉบับใหม่ก่อน
การสุ่มตัวอย่างใหม่ภายใต้ประทุน - การตั้งค่าที่ราบรื่น สิ่งที่คำใบ้ 'คุณภาพสูง' ขอให้เบราว์เซอร์ทำ และเหตุใดผลลัพธ์จึงแตกต่างกันเล็กน้อยระหว่างเบราว์เซอร์
ก่อนวาดภาพ ตัวเรนเดอร์จะเปิดใช้งาน imageSmoothingEnabled และตั้งค่า imageSmoothingQuality ให้อยู่ในระดับสูง สิ่งเหล่านี้คือส่วนควบคุมพื้นที่ทำงานของเบราว์เซอร์ ไม่ใช่คำขอสำหรับ Lanczos, bicubic หรือเคอร์เนลอื่นๆ ที่มีชื่อ การใช้งานไม่สามารถรับประกันตัวอย่างที่เหมือนกันในเครื่องยนต์ได้ เนื่องจาก API เปิดเผยคำใบ้ด้านคุณภาพแทนที่จะเป็นตารางค่าสัมประสิทธิ์ที่แน่นอนของเบราว์เซอร์
การเปรียบเทียบที่เป็นประโยชน์จะรักษาแหล่งที่มา ขนาดเอาต์พุต และเบราว์เซอร์คงที่ จากนั้นตรวจสอบขอบแนวทแยง เส้นละเอียด และพื้นผิวที่ซ้ำกัน หากเบราว์เซอร์อื่นมีความแตกต่างกันเล็กน้อย นั่นไม่ได้หมายความว่าอัตราส่วนเป้าหมายจะเปลี่ยนไป หมายถึงคำขอทางเรขาคณิตเดียวกันที่ส่งผ่านการใช้งาน Canvas ที่แตกต่างกัน ซึ่งเป็นเหตุผลว่าทำไมบทความจึงหลีกเลี่ยงประสิทธิภาพหรือเปอร์เซ็นต์คุณภาพที่คิดค้นขึ้น
การเข้ารหัสเอาต์พุต — เปลี่ยนผืนผ้าใบกลับเป็นไฟล์ภาพที่เข้ารหัสและเสนอให้ดาวน์โหลด
พื้นที่ส่งออกจะกลายเป็น Blob ผ่าน OffscreenCanvas.convertToBlob เมื่อมีวิธีการนั้นอยู่ หรือ HTMLCanvasElement.toBlob มิฉะนั้น ผู้ใช้เลือก JPEG, PNG หรือ WebP ค่าคุณภาพจะถูกส่งไปยังตัวเข้ารหัส แม้ว่า PNG จะไม่ใช้การควบคุมคุณภาพที่สูญเสียไปในลักษณะที่ JPEG และ WebP ทำก็ตาม จำนวนไบต์ผลลัพธ์เป็นการวัด ไม่ใช่การประมาณการ
สำหรับเป้าหมายที่เลือกหลายรายการ เครื่องมือจะสร้างแต่ละ Blob ตามลำดับ แสดงขนาดจริงและขนาดที่วัดได้ และสามารถจัดแพคเกจไฟล์ที่เข้ารหัสแล้วลงใน ZIP ที่เก็บข้อมูล ZIP ไม่ได้ปรับปรุงการบีบอัดรูปภาพที่นี่ เนื้อหาระบุว่ารูปแบบเหล่านั้นถูกบีบอัดแล้ว การดาวน์โหลดแต่ละรายการและไฟล์เก็บถาวรนั้นมาจากไบต์ที่สร้างขึ้นในเครื่อง
การใช้งานนี้จะดำเนินการส่งออกบนเธรดหลัก ไม่ใช่ใน Web Worker
คู่มือระบุว่างานหนักมักจะทำงานใน Web Worker แต่แอปนี้จะนำเข้าฟังก์ชันการครอบตัดและการเรนเดอร์โดยตรงไปยัง main.js และวนซ้ำผ่านเป้าหมายที่นั่น ไม่มีการสร้างผู้ปฏิบัติงานในเส้นทางที่ตรวจสอบ เพจยังคงสามารถใช้งานได้สำหรับงานทั่วไป แต่ต้องสังเกตการตอบสนองมากกว่าที่จะมาจากสถาปัตยกรรมที่ไม่มีอยู่
การแยกเครือข่ายได้รับการสนับสนุนจากหลักฐานสองประเภท การทดสอบหลักจะติดตั้งตัวป้องกันเครือข่ายและเฟรมทุกค่าที่ตั้งไว้ล่วงหน้าโดยไม่ต้องพยายาม ในขณะที่บันทึกผลิตภัณฑ์ทำเครื่องหมายว่ากำลังประมวลผลในเครื่อง การตรวจสอบแผงเครือข่ายรันไทม์สามารถเพิ่มหลักฐานการปรับใช้ ควรแยกความแตกต่างระหว่างการอัปโหลดรูปภาพจากเนื้อหาของหน้าทั่วไปหรือการวิเคราะห์ที่เปิดเผย แทนที่จะอ้างว่าทั้งหน้าไม่มีการร้องขอ
สิ่งนี้ไม่ครอบคลุม — GPU-ไลบรารีการปรับขนาดแบบเร่งและไปป์ไลน์รูปภาพฝั่งเซิร์ฟเวอร์
เส้นทางนี้สร้างขึ้นโดยเจตนาบนเบราว์เซอร์ดั้งเดิม แทนที่จะเป็นไลบรารี GPU หรือไปป์ไลน์สื่อระยะไกล ไม่เปิดเผยเคอร์เนลการสุ่มตัวอย่างที่เลือกได้ อัลกอริธึมทางเลือกการวัดประสิทธิภาพ หรือสัญญาว่าจะเร่งการประมวลผลเป็นชุด อิมเมจต้นฉบับเดียวสร้างการครอบตัดหลายแบบ ไฟล์ต้นฉบับที่ไม่เกี่ยวข้องจำนวนมากอยู่ในเวิร์กโฟลว์อื่น
การยกเว้นเหล่านั้นทำให้สัญญาสามารถทดสอบได้ รหัสนี้พิสูจน์การตรวจสอบไฟล์ การถอดรหัสบิตแมป การวางกรอบเลขคณิต ภาพวาดแคนวาส การเข้ารหัส Blob และการดาวน์โหลดแอสเซมบลี ไม่ได้พิสูจน์ว่าเซิร์ฟเวอร์ฟาร์มจะปรับขนาดพิกเซลเดียวกันได้อย่างไร หรือเส้นทาง GPU ที่เบราว์เซอร์อาจเลือกภายในได้อย่างไร การอ้างสิทธิ์หยุดที่ Web API ที่สังเกตได้ที่ใช้
ประเด็นสำคัญ: เบราว์เซอร์ของคุณมีตัวปรับขนาดในตัวอยู่แล้ว - Social Image Resizer จะขับเคลื่อนมันให้คุณ ครอบตัดและปรับขนาดตามอัตราส่วนภาพของแพลตฟอร์มโดยไม่ต้องอัปโหลดไฟล์
เบราว์เซอร์ให้การดำเนินการที่จำเป็นอยู่แล้ว แต่ผลลัพธ์ที่เป็นประโยชน์จะขึ้นอยู่กับรูปทรงที่ถูกต้องรอบๆ Social Image Resizer เลือกสเกลสูงสุดสำหรับปก สเกลขั้นต่ำสำหรับบรรจุ จับการเคลื่อนไหว ดูตัวอย่างคำแนะนำในพื้นที่ปลอดภัยแยกกัน และส่งออกตามขนาดเป้าหมายที่แน่นอน การเรียบเรียงดังกล่าวจะเปลี่ยนภาพวาดระดับต่ำ API ให้เป็นเวิร์กโฟลว์สินทรัพย์ทางสังคมที่ทำซ้ำได้
ทดสอบไปป์ไลน์ด้วยรูปภาพต้นฉบับ แทนที่จะเป็นสำเนาที่ย่อขนาดลงก่อนหน้านี้ เลือกเครื่องมือที่ตั้งไว้ล่วงหน้าหรืออัตราส่วนที่กำหนดเอง ย้ายวัตถุ ส่งออกหนึ่งครั้ง และตรวจสอบขนาดที่ดาวน์โหลด หลักฐานคือไฟล์ในเครื่องที่คุณได้รับและเส้นทางโค้ดที่สร้างไฟล์นั้น ไม่ใช่การอ้างว่าทุกเบราว์เซอร์ใช้รีแซมเปลอร์ที่ซ่อนไว้เหมือนกัน