تقدم هذه المقالة بالتفصيل كيفية تنفيذ وظيفة الضغط لفترة طويلة لحفظ الصور في H5.
يعد الضغط لفترة طويلة لحفظ الصور متطلبًا شائعًا جدًا في بعض الصفحات الترويجية لـ H5، ولكن لا تتمتع Js بمثل هذه الإمكانية، لذلك يجب عليك إما الاعتماد على القدرات الأصلية لنظام Android أو iOS، أو استخدام اللوحة القماشية لرسم واحدة بنفسك (لقطة شاشة). بالمقارنة مع التكلفة الأصلية، فإن التكلفة مرتفعة للغاية ويجب أن تعتمد على التطبيق، الذي أصبح قديمًا مقارنة بـ H5 المتداول على نطاق واسع والمتعدد المنصات، لذلك أصبح القماش طريقتنا الشائعة.
فيما يلي الخطوات التفصيلية: 1. لقطة شاشة html2canvasيُفضل أن تكون عقدة الصورة المحفوظة علامة 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);}); 2. تحويل صورة Canvas2 إلى صورةفي الظروف العادية، يعد التحويل إلى تنسيق 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'); // يمكنك تغيير التنسيق حسب الحاجة;} 3. اضغط لفترة طويلة لحفظ الصورةقم أولاً بتنفيذ طريقة الضغط لفترة طويلة بعد الضغط لفترة طويلة، يتم إلحاق الصورة التي تم إنشاؤها بالجسم وتطفو بشفافية على الشاشة.
// تغليف طريقة الضغط لفترة طويلة 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، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب!