การสนทนาสั้นๆ เกี่ยวกับรูปแบบการโหลดรูปภาพหน้าเว็บบนมือถือล่วงหน้า

เนื่องจากความต้องการทางธุรกิจของบริษัท หน้าเว็บที่ Vue สร้างขึ้นจึงต้องเชื่อมต่อกับ wifi ของบ้านอัจฉริยะ อย่างไรก็ตาม wifi นี้ไม่ได้เชื่อมต่อกับอินเทอร์เน็ตและใช้เพื่อเชื่อมต่อโทรศัพท์มือถือเข้ากับบ้านเท่านั้น ด้วยวิธีนี้หน้าเว็บไม่สามารถโหลดรูปภาพบนเซิร์ฟเวอร์ภายใต้ wifi ประเภทนี้ได้

ในเรื่องนี้ ฉันได้เสนอวิธีแก้ปัญหา 3 รายการสำหรับระบบหน้าเดียวของ Vue

1. โหลดรูปภาพในหน้าก่อนหน้าก่อน แคช จากนั้นจึงนำไปไว้ในหน้าที่ตัดการเชื่อมต่อถัดไป

2. สร้างเพจด้วยคอนเทนเนอร์การกำหนดเส้นทางที่ด้านบน วางเพจหลังจากที่เครือข่ายถูกตัดการเชื่อมต่อ และรูปภาพทั้งหมดที่ต้องแสดงที่ด้านล่าง ด้วยวิธีนี้ เมื่อโหลดเพจแล้ว รูปภาพทั้งหมดจะปรากฏขึ้น และเส้นทางย่อยด้านบนสามารถรับรูปภาพได้ตามธรรมชาติ

3. แปลงรูปภาพเป็นข้อมูล base64 และบันทึกลงใน localStorage

โซลูชันที่ 1 และ 2 ค่อนข้างง่ายและทำงานได้ดีบนแพลตฟอร์มพีซีและ Android แต่มันไม่แสดงบน ios

(เห็นได้ชัดว่ารูปภาพอยู่ด้านล่าง แต่รูปภาพด้านบนไม่แสดง)

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

 /* รับโค้ด base64 ของรูปภาพ* @param {obj}img image dom object* */ function getBase64Image(img) { la canvas = document.createElement(canvas); canvas.width = img.width; img. ความสูง; ให้ ctx = canvas.getContext(2d); ctx.drawImage(img, 0, 0, img.width, img.height); // วาดภาพเดียวกัน return canvas.toDataURL(image/png); // แปลงเป็นข้อมูล base64}

การใช้ Canvas สามารถแปลงรูปภาพเป็นรูปแบบ base64 ได้อย่างง่ายดาย จากนั้นบันทึกลงใน sessionStorage เมื่อคุณแสดงรูปภาพอีกครั้งในภายหลัง เพียงตั้งค่าแอตทริบิวต์ src ของ img เป็นข้อมูล base64 สิ่งที่ฉันทำในโปรเจ็กต์ vue คือการสร้างส่วนประกอบสำหรับการแปลงและบันทึก base64 แปลงรูปภาพทั้งหมดในช่องเป็น base64 สร้างแอตทริบิวต์ชื่อสำหรับแท็ก img และใช้เป็นคีย์ของ sessionStorage จากนั้นสร้างส่วนประกอบเป็น ส่วนประกอบการแสดงผล (มีแท็ก img เพียงแท็กเดียว) ตั้งค่าแอตทริบิวต์ชื่อให้เหมือนกับรูปภาพที่เกี่ยวข้อง และใช้เป็นคีย์ในการดึงข้อมูล base64 ของ sessionStorage

แปลงและบันทึกส่วนประกอบ:

 <!--รูปภาพที่ต้องโหลดล่วงหน้า--> <save-img-base64> <img src=../../assets/img/connect/bind_xiaofang.png name=bind_xiaofang/> <img src=.. / ../assets/img/connect/bind_alonePro.png name=bind_allonePro/> <img src=../../assets/img/connect/bind_S20.png name=bind_S20/> <img src=../../assets/img/connect/bind_S30.png name=bind_S30/> <img src= ../../assets/img/connect/connectStart_xiaofang.png name=connectStart_xiaofang/> <img src=../../assets/img/connect/connectStart_alonePro.png name=connectStart_allonePro/> <img src=../../assets/img/connect/connectStart_S20.png name= เชื่อมต่อStart_S20/> <img src=../../assets/img/connect/connectStart_S30.png name=connectStart_S30/> <img src=../../assets/img/connect/reset_xiaofang.png name=reset_xiaofang/> <img src= ../../assets/img/connect/reset_allonePro.png name=reset_allonePro/> <img src=../../assets/img/connect/reset_S20.png name=reset_S20/> <img src=../../assets/img/connect/reset_S30.png name= Reset_S30/> <img src=../../assets/img/connect/network_set.png name=network_set/> <img src=../../assets/img/connect/phone_wifi.png name=phone_wifi/> <img src=../../assets/img/connect/tmall.png name= tmall/> </save-img-base64>

ส่วนประกอบการแสดงผล:

 <img-base64 name=network_set></img-base64>

เบราว์เซอร์ sessionStorage สถานการณ์:

ดังที่เห็นได้จากตาราง Can I use โดยพื้นฐานแล้วเบราว์เซอร์มือถือสมัยใหม่สามารถใช้งานร่วมกับ Canvas ได้ และทุกคนสามารถใช้งานได้อย่างมั่นใจ

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network