บทความหนึ่งแก้ปัญหาฟังก์ชันการบันทึกรูปภาพแบบกดค้างในหน้า HTML5 ได้อย่างสมบูรณ์

บทความนี้จะแนะนำรายละเอียดวิธีการใช้ฟังก์ชันการกดค้างเพื่อบันทึกรูปภาพใน H5

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

โหนดรูปภาพที่บันทึกไว้ควรเป็นแท็ก img: โหนดที่คุณต้องการจับภาพหน้าจอควรเป็นรูปภาพที่มีแท็ก img หลังจากการทดสอบ หากเป็นภาพพื้นหลัง มันจะเบลอเล็กน้อย ดังนั้นคุณต้องทำ ให้ความสนใจเป็นพิเศษกับมัน

 npm i html2canvas --saveimport html2canvas จาก 'html2canvas'; // โหนดรูปภาพที่คุณต้องการบันทึก const dom = document.querySelector('img'); // สร้างแคนวาสใหม่ const Canvas = document.createElement('canvas') ; const width = document.body.offsetWidth; // ความกว้างของหน้าจอที่มองเห็นได้ const height = document.body.offsetHeight; ความสูงของหน้าจอที่มองเห็นได้ const scale = window.devicePixelRadio; // devicePixelRadio ของอุปกรณ์ // ขยาย Canvas canvas ตามเวลาสเกล จากนั้นวางไว้บนหน้าจอขนาดเล็กเพื่อแก้ปัญหาความเบลอ Canvas.width = width * scale ; Canvas.height = height * scale;Canvas.getContext('2d').scale(scale, scale);html2canvas(dom, { canvas: Canvas, scale, useCORS: true, การบันทึก: true, width: width + 'px', hegiht: height + 'px',}).then((canvas) => { const context = canvas.getContext('2d'); // ปิด anti-aliasing context.mozImageSmoothingEnabled = false; บริบท .webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; // แปลงแคนวาสเป็นรูปภาพ canvas2Image(canvas, canvas.width, canvas.height);});

ภายใต้สถานการณ์ปกติ การแปลงเป็นรูปแบบ JPEG จะดีมาก

 canvas2Image(canvas, canvas.width, canvas.height) { const retCanvas = document.createElement('canvas'); const retCtx = retCanvas.getContext('2d'); retCanvas.width = ความกว้าง; .drawImage (ผืนผ้าใบ, 0, 0, ความกว้าง, ความสูง, 0, 0, ความกว้าง, ความสูง); const img = document.createElement('img'); img.src = retCanvas.toDataURL('image/jpeg'); // คุณสามารถเปลี่ยนรูปแบบได้ตามต้องการ return img;}

ขั้นแรกให้ใช้วิธีการกดแบบยาว หลังจากกดแบบยาว รูปภาพที่สร้างขึ้นจะถูกผนวกเข้ากับเนื้อหาและลอยอย่างโปร่งใสบนหน้าจอ

 // สรุปวิธีการกดแบบยาว longPress(fn) { la const $this = this; for (let i = 0; i < $this.length; i++) { $this[i].addEventListener('touchstart ', () => { timeout = setTimeout(fn, 800); // หากเวลากดแบบยาวเกิน 800ms วิธีการส่งผ่านจะถูกดำเนินการ}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // หากเวลากดแบบยาวน้อยกว่า 800ms วิธีการขาเข้าจะไม่ถูกดำเนินการ}, false }}// เพิ่มรูปภาพที่สร้างขึ้นใน bodyconst img = canvas2Image(canvas, canvas.width, canvas.height);document.body.appendChild(img);img.style.cssText = ความกว้าง:100%;ความสูง:100%;ตำแหน่ง:สัมบูรณ์;ด้านบน:0;ซ้าย:0;ขวา:0;ด้านล่าง:0;ความทึบ:0;;

4. รหัสที่สมบูรณ์มีดังนี้

 $.fn.longPress = function(fn) { ให้หมดเวลา = 0; const $this = this; for (let i = 0; i < $this.length; i++) { $this[i].addEventListener('touchstart' , () => { timeout = setTimeout(fn, 800); // หากเวลากดแบบยาวเกิน 800ms วิธีการส่งผ่านจะถูกดำเนินการ}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // หากเวลากดแบบยาวน้อยกว่า 800ms วิธีการขาเข้าจะไม่ถูกดำเนินการ}, false); }};$ ('img ').longPress(() => { saveImg();});saveImg() { // โหนดรูปภาพที่คุณต้องการบันทึก const dom = document.querySelector('img'); // สร้างผืนผ้าใบใหม่ const Canvas = document.createElement('canvas'); const width = document.body.offsetWidth; // ความกว้างของหน้าจอที่มองเห็นได้ const height = document.body.offsetHeight; // ความสูงของหน้าจอที่มองเห็นได้ const scale = window.devicePixelRatio; // devicePixelRatio ของอุปกรณ์ // ขยาย Canvas canvas ตามขนาดเวลา แล้ววางไว้บนหน้าจอขนาดเล็กเพื่อแก้ปัญหาความเบลอ Canvas.width = width * scale; Canvas.height = height * scale; Canvas.getContext('2d').scale(scale, scale); html2canvas(dom, { แคนวาส: แคนวาส, สเกล, useCORS: จริง, การบันทึก: จริง, ความกว้าง: ความกว้าง + ' px', hegiht: height + 'px', }).then((canvas) => { const context = canvas.getContext('2d'); // ปิด anti-aliasing context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; // Canvas ถูกแปลงเป็นรูปภาพ const img = canvas2Image(canvas, canvas.width, canvas. ความสูง); document.body.appendChild (img); img.style.cssText = width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;; }}canvas2Image(ผืนผ้าใบ ความกว้าง ความสูง ) { const retCanvas = document.createElement('canvas'); const retCtx = retCanvas.getContext('2d'); retCanvas.width = width; retCanvas.height = height; retCtx.drawImage(แคนวาส, 0, 0, ความกว้าง, ความสูง, 0, 0, ความกว้าง, ความสูง); = retCanvas.toDataURL('image/jpeg'); // คุณสามารถเปลี่ยนรูปแบบได้ตามต้องการ return img;}

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

ข้างต้นเป็นบทความที่บรรณาธิการแนะนำเพื่อแก้ปัญหาฟังก์ชั่นบันทึกรูปภาพแบบกดยาวในหน้า HTML5 ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันแล้วบรรณาธิการจะตอบกลับคุณ ทันเวลา!