يتم دمج الفيديو مع اللوحة القماشية لتحقيق وظيفة لقطة شاشة الفيديو عبر الإنترنت

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

أليس هذا رائعًا؟ إنه في الواقع بسيط للغاية. سأخبرك بكيفية القيام بذلك أدناه.

وتنقسم بشكل أساسي إلى ثلاث وظائف رئيسية، الأولى هي الأولى:

استخدم كائن URL للحصول على رابط الفيديو وعرضه:

يحتوي كائن URL الخاص بـ js على طريقة createObjectURL، والتي يمكنها الحصول على عنوان URL لملف (كائن ملف) ثم إدراجه في سمة src لعنصر الفيديو، بحيث يمكن عرض الفيديو. بالطبع، هناك عدة طرق للحصول على كائن الملف، مثل استخدام عناصر الإدخال أو السحب. مقتطف التعليمات البرمجية الكامل:

 <input type=file/>document.querySelector('input[type=file]').addEventListener('change',function () { document.querySelector('video').src = window.URL.createObjectURL(this. الملفات[0])})

بالطبع، لم أكتب الأمر بهذه الطريقة في الكود المصدري، فقط لأقدم لك عرضًا توضيحيًا. لمزيد من الاستخدام المحدد لعناوين URL، يمكنك قراءة هذه المقالة أو MDN.

الخطوة التالية هي الخطوة الأساسية، ولكنها أيضًا بسيطة جدًا، وهي استخدام طريقة drawImage الخاصة باللوحة القماشية. إذا انتقلت إلى القسم 15.2.6 من الارتفاع 3، فستجد أن استخدام طريقة drawImage موضح في. تفاصيل كثيرة، ولكن تم تفويتها. واحد، وهو أنه يمكن أيضًا تمرير عنصر الفيديو إلى طريقة drawImage ويمكن رسم الرسومات. مقتطف رمز محدد:

 var Canvas = document.createElement(canvas);var CanvasCtx = Canvas.getContext(2d);var video=document.querySelector('video');// ضع إحداثيات المحور x وy وحجم الصورة الأصلية، و علامة x للصورة المستهدفة، وتسمية المحور y، وحجمها. CanvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);// تشفير رمز base64 في سلسلة عنوان url var dataUrl = Canvas.toDataURL(image/png);// أدخل الصورة في سمة src document.createElement('img').src=dataUrl;

بعد رسم الصورة، قم باستدعاء طريقة toDataURl الخاصة باللوحة القماشية لتحويل الصورة إلى عنوان URL مشفر بـ base64، والذي يمكن إدراجه في عنصر img للعرض. اكتمل إنتاج الصورة المصغرة. فيما يتعلق بالعلاقة بين الصور وbase64، يمكن للطلاب قراءة هذه المقالة.

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

 function getOffset(elem) { var pos = {x: elem.offsetLeft, y: elem.offsetTop}; var offsetParent = elem.offsetParent; while (offsetParent) { pos.x += offsetParent.offsetLeft; .offsetTop; OffsetParent = offsetParent.offsetParent } return pos;}

تهدف هذه الوظيفة إلى الحصول على المسافة بين الصورة الصغيرة وإطار العرض (منفذ العرض) وتوفيرها للصورة الكبيرة كمعلمة إزاحة. يحتوي القسم 12.2.3 من Elevation 3 على رمز متطابق تقريبًا، مع تعليمات مفصلة ووظيفة getBoundingClientRect البديلة. وقد ذكر ذلك أيضًا، يرجى قراءة الكتاب لمزيد من التفاصيل.

الكود التالي هو إنشاء صور كبيرة وصور صغيرة وتحقيق تأثيرات الرسوم المتحركة. للراحة وسهولة الفهم، أستخدم JQuery هنا

 var $imgBig = $(<img/>);// قم بتعيين الموضع الأولي للصورة الكبيرة، وهو الفيديو الأصلي. $imgBig.css({ الموضع: مطلق، اليسار: video.offsetLeft، الأعلى: video.offsetTop، العرض: video.offsetWidth+ px، الارتفاع: video.offsetHeight+ px}).attr(src, dataUrl);var $img = $ (<img/>);$img.hide();// احصل على معلمة المسافة للصورة الصغيرة لتحقيق تأثير الرسوم المتحركة للصورة الكبيرة. var offset = getOffset($img[0]);// إضافة تأثير الرسوم المتحركة $imgBig.animate({ left: offset.x + px, top: offset.y + px, width: $img.width() + px, الارتفاع: $img.height() + px}, 500, function () { $img.show(); $imgBig.remove();});

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

يوجد أدناه عنوان الكود المصدري الخاص بي، يمكنك تجربته:

العرض التوضيحي على جيثب

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