مقال واحد يحل مشكلة وظيفة حفظ الصورة بالضغط لفترة طويلة في صفحات HTML5

تقدم هذه المقالة بالتفصيل كيفية تنفيذ وظيفة الضغط لفترة طويلة لحفظ الصور في H5.

يعد الضغط لفترة طويلة لحفظ الصور متطلبًا شائعًا جدًا في بعض الصفحات الترويجية لـ H5، ولكن لا تتمتع Js بمثل هذه الإمكانية، لذلك يجب عليك إما الاعتماد على القدرات الأصلية لنظام Android أو iOS، أو استخدام اللوحة القماشية لرسم واحدة بنفسك (لقطة شاشة). بالمقارنة مع التكلفة الأصلية، فإن التكلفة مرتفعة للغاية ويجب أن تعتمد على التطبيق، الذي أصبح قديمًا مقارنة بـ H5 المتداول على نطاق واسع والمتعدد المنصات، لذلك أصبح القماش طريقتنا الشائعة.

يُفضل أن تكون عقدة الصورة المحفوظة علامة img: يُفضل أن تكون العقدة التي تريد التقاط لقطة شاشة لها هي صورة بها علامة img. بعد الاختبار، إذا كانت صورة خلفية، فستكون ضبابية بعض الشيء، لذا عليك القيام بذلك إيلاء اهتمام خاص لذلك.

 npm i html2canvas --saveimport html2canvas from 'html2canvas'; // عقدة الصورة التي تريد حفظها const dom = document.querySelector('img'); // إنشاء لوحة قماشية جديدة const Canvas = document.createElement('canvas') const width = document.body.offsetWidth; // عرض الشاشة المرئية const height = document.body.offsetHeight; ارتفاع الشاشة المرئية constscale = window.devicePixelRadio; // devicesPixelRadio للجهاز // قم بتكبير اللوحة القماشية حسب أوقات القياس، ثم ضعها على شاشة صغيرة لحل مشكلة التمويه Canvas.width = width *scale Canvas.height = height *scale;Canvas.getContext('2d').scale(scale,scale);html2canvas(dom, { قماش: قماش، مقياس، useCORS: صحيح، التسجيل: صحيح، العرض: width + 'px', hegiht: height + 'px',}).then((canvas) => { const context = Canvas.getContext('2d'); // إيقاف تشغيل الصقل context.mozImageSmoothingEnabled = false; context.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 = width; retCanvas.height; .drawImage(قماش، 0، 0، عرض، ارتفاع، 0، 0، عرض، height); const img = document.createElement('img'); img.src = retCanvas.toDataURL('image/jpeg'); // يمكنك تغيير التنسيق حسب الحاجة;}

قم أولاً بتنفيذ طريقة الضغط لفترة طويلة بعد الضغط لفترة طويلة، يتم إلحاق الصورة التي تم إنشاؤها بالجسم وتطفو بشفافية على الشاشة.

 // تغليف طريقة الضغط لفترة طويلة longPress(fn) { Let timeout = 0; const $this = this; for (let i = 0; i < $this.length; i++) { $this[i].addEventListener('touchstart ', () => { timeout = setTimeout(fn, 800); // إذا تجاوز وقت الضغط الطويل 800 مللي ثانية، فسيتم تنفيذ الطريقة التي تم تمريرها}, false); $this[i].addEventListener('touchend', () => { ClearTimeout(timeout); // إذا كان وقت الضغط الطويل أقل من 800 مللي ثانية، فلن يتم تنفيذ الطريقة الواردة}, 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) { Let timeout = 0; const $this = this; for (let i = 0; i < $this.length; i++) { $this[i].addEventListener('touchstart' , () => { timeout = setTimeout(fn, 800); // إذا تجاوز وقت الضغط الطويل 800 مللي ثانية، فسيتم تنفيذ الطريقة التي تم تمريرها}, false); $this[i].addEventListener('touchend', () => { ClearTimeout(timeout); // إذا كان وقت الضغط الطويل أقل من 800 مللي ثانية، فلن يتم تنفيذ الطريقة الواردة}, 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; constscale = window.devicePixelRatio; // devicesPixelRatio للجهاز // قم بتكبير لوحة القماش القماشية حسب أوقات القياس، ثم ضعها على شاشة صغيرة لحل مشكلة التمويه Canvas.width = width * Scale; Canvas.height = height *scale; Canvas.getContext('2d').scale(scale,scale); px', hegiht: height + 'px', }).then((canvas) => { const context = Canvas.getContext('2d'); // قم بإيقاف تشغيل الصقل context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; height); document.body.appendChild(img); img.style.cssText = width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;; }}canvas2Image(canvas, width, height ) { const retCanvas = document.createElement('canvas'); retCanvas.width = width; retCanvas.height = height; retCtx.drawImage(canvas, 0, 0, width, height, 0, width, height); = retCanvas.toDataURL('image/jpeg'); // يمكنك تغيير التنسيق حسب الحاجة return img;}

عندما بدأت في القيام بذلك لأول مرة، قرأت الكثير من المقالات على الإنترنت واستمرت في المحاولة وارتكاب الأخطاء، وأخيرًا، أدركت بسعادة وظيفة الضغط لفترة طويلة لحفظ الصور، وبعد أن انتهيت منها، وجدت أنها بسيطة جدًا. تقدم هذه المقالة العملية برمتها بالكامل. لا، شكرًا!

ما سبق هو مقال قدمه المحرر لحل وظيفة حفظ الصورة بالضغط لفترة طويلة في صفحات HTML5، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب!