H5 เรียกกล้องถ่ายรูปและบีบอัดรหัสตัวอย่างของรูปภาพ

จัดระเบียบเอกสารค้นหารหัสอินสแตนซ์สำหรับ H5 เพื่อโทรหากล้องเพื่อถ่ายภาพและบีบอัดรูปภาพและเรียงลำดับและปรับปรุงมัน

เมื่อเร็ว ๆ นี้ฉันต้องการสร้างหน้า H5

ฟังก์ชั่นหลักจุดของส่วนหน้าคือ:

1. วิธีโทรหากล้อง
2. วิธีบีบอัดภาพ
3. รูปภาพถึง base64

วิธีที่ง่ายที่สุดในการเรียกกล้องคือการใช้คุณสมบัติไฟล์อินพุต [กล้อง]:

 <input type = ไฟล์ capture = carera accept = image/*> // camera <input type = file accept = image/*> // อัลบั้ม

ความเข้ากันได้ของวิธีการนี้ยังคงเป็นปัญหา ฉันค้นหาวิธีแก้ปัญหาที่ดีมากมายบนอินเทอร์เน็ตและฉันสามารถเขียนต่อไปได้ แก่นแท้ แก่นแท้

การบีบอัดรูปภาพใช้เพื่อใช้ FileReader และ <canvas>

วัตถุ filereader อนุญาตให้เว็บแอปพลิเคชันอ่านเนื้อหาของไฟล์ที่เก็บไว้ในคอมพิวเตอร์แบบอะซิงโครนัสและใช้ไฟล์หรือวัตถุ BLOB เพื่อระบุไฟล์หรือข้อมูลที่คุณต้องการอ่าน

<Canvas> เป็นองค์ประกอบ HTML ที่สามารถใช้สคริปต์เพื่อวาดกราฟิกซึ่งสามารถวาดกราฟิกและภาพเคลื่อนไหวที่เรียบง่าย

การบีบอัดรูปภาพควรบีบอัดความละเอียดและคุณภาพของภาพ ของภาพ

 var max_wh = 800; ภาพ. height = max_wh;} if (image.width> max_wh) {// ความกว้างและสัดส่วนอื่น ๆ ของการซูม *= image.height *= max_wh/ image.width; / dataurl ที่ได้รับผ่าน filerereader

จากนั้นมีคุณภาพของการบีบอัดภาพ สร้างแท็ก <Canvas> แบบไดนามิกจากนั้นบีบอัดรูปภาพ:

 Var Quality = 80; , 0, image.width, image.height);

จากนั้นผลลัพธ์ของการอัปโหลดไปยังเซิร์ฟเวอร์และแสดงเซิร์ฟเวอร์ แต่สิ่งต่าง ๆ ไม่ราบรื่น แก่นแท้ แก่นแท้ หลังจากที่โทรศัพท์มือถือ iOS ถูกบีบอัดรูปภาพจะหมุนอย่างลึกลับและยังคงแก้ปัญหาต่อไป

ใบเสนอราคาแรก exif.js และรับข้อมูลทิศทางภาพถ่ายผ่าน exif.getData และ exif.gettg

 // ไฟล์ได้รับ exif.getData (ไฟล์, ฟังก์ชัน () {Orientation = exif.getTg (ไฟล์, 'การวางแนว');});

ความหมายของค่าการปฐมนิเทศแต่ละค่าสอดคล้องกับโทรศัพท์มือถือ iPhone เพื่อถ่ายภาพ:

 สวิตช์ (การวางแนว) {กรณีที่ 6: กรณีที่ 8: cvs.width = ความสูง; ในเวลานี้คีย์ที่บ้านในกรณีด้านซ้าย 3: // 180 องศาไปที่บริบทการหมุนด้านซ้ายแปล (ความกว้าง, ความสูง); ปกติใช้ทิศทางของโทรศัพท์มือถือ) กรณีที่ 6: บริบทการค้า (0.5 * math.pi); 8: // ผกผันตามเข็มนาฬิกาการหมุน 90 องศาบริบทการค้า (-0.5 * math.pi);

จากนั้นอัปโหลดรูปภาพและพบว่าภาพใต้ iOS เป็นเรื่องปกติ

รหัสที่สมบูรณ์ได้รับด้านล่าง:

 $ ('input [type = file]') /i.test (file.type) {exif.getData (ไฟล์, ฟังก์ชั่น () {Orientation = exif.getTag (ไฟล์, 'การวางแนว');}); max_wh = 800; image.head = max_wh;} if (images.width> max_wh) {// ความกว้างและสัดส่วนอื่น ๆ ถูกซูม *= image.height *= max_wh / image.width; 80; .Height = ความกว้าง; 180 องศาไปทางด้านซ้ายที่เชื่อมต่อกันการแปล (ความกว้าง, ความสูง); ของโทรศัพท์ บริบททวนเข็มขัดทบทวน (-0.5 * math.pi); image/jpeg ', คำถาม/100); -

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้