مقطع فيديو لعملية تشغيل نقطة البكسل على القماش، انقطاع للشاشة الخضراء

تقدم هذه المقالة مقطع فيديو للشاشة الخضراء لعملية نقطة بكسل اللوحة القماشية ومشاركتها مع الجميع، والتفاصيل هي كما يلي:

الاستخدام:

 context.putImageData(imgData, x, y, dX, dY, dWidth, dHeight); 

يقوم الكستناء أدناه بتنفيذ العديد من تأثيرات المرشح البسيطة، ويجب أن يكون لدى الطلاب الذين درسوا "معالجة الصور الرقمية" فهم أعمق لهذا الأمر.

تجريبي

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

جزء من الكود

 استيراد imgUrl من './component/sample.jpg'؛ تصدير افتراضي {data () {return {imgUrl: imgUrl}}، الطرق: {onOperate1 () {this.ctx.putImageData(this.onCompute1(), 0, 0) );},onOperate2 () {this.ctx.putImageData(this.onCompute2(), 0, 0);},...onCancel () {this.reload();},onCompute1 () {let data = this.frameData.data for (let i = 0; i < this.imgDataLength; i + = 4) { Let r = data[i + 0], g = data[i + 1], b = data[i + 2]; data[i + 0] = 255 - data[i + 1] = 255 - g; data[i + 2] = 255 - b; } return this.frameData;},onCompute2 () {let data = this.frameData; imgDataLength; i += 4) { data[i] = Math.abs(data[i + 1] - data[i + 2] + data[i + 1] + data[i]) * data[i] / 256; data[i + 1] = Math.abs(data[i + 2] - data[i + 1] + data[i + 2] + data[i]) * data[i] / 256; data[i + 2] = Math.abs(data[i + 2] - data[i + 1] + data[i + 2] + data[i]) * data[i + 1] / 256 } return this.frameData;},...},mounted () { this.canvas = this.$refs['canvas']; إعادة تحميل ()؛}}

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

ثم تم انتقادي في دائرة الأصدقاء بسبب قطع الصور. في الواقع، لقد تم التقاطها أثناء وقوفك أمام شاشة خضراء:joy:.

يمكن لأداة العصا السحرية في PS تحديد ومسح جميع وحدات البكسل المتشابهة ضمن تفاوت معين في الصورة، مما يجعل من السهل قص الصورة بنقرة واحدة. الفرضية هي أن الموضوع يجب أن يكون مختلفًا بشكل كبير عن الخلفية. كلما زاد الاختلاف في قيم البكسل، أصبح من الأسهل قص الصورة، وكان تأثير الصورة أفضل.

يمكن لـ Canvas أن يفعل الشيء نفسه ويمكنه معالجة إطارات الفيديو. المبدأ هو نفسه - ما عليك سوى ضبط شفافية كتلة بكسل الشاشة الخضراء في كل إطار فيديو على 0. مثله -

تجريبي

جزء من الكود

 استيراد videoUrl من './component/video.ogv';استيراد imgUrl من './component/sample.jpg';const TOLERANCE = 5;تصدير افتراضي {data () {return {videoUrl: videoUrl,imgUrl: imgUrl}}, الطرق: {draw () {if (this.video.paused || this.video.end) { return; }this.ctx.drawImage(this.video, 0, 0, this.width, this.height);this.ctx.putImageData(this.cutOut(), 0, 0);},cutOut () {letframeData = this.ctx.getImageData(0, 0, this.width, this.height),len =frameData.data.length / 4; i < len i++) { Let r =frameData.data[i * 4 + 0], g =frameData.data[i * 4 + 1], b =frameData.data[i * 4 + 2]; - 100 >= التسامح && g - 100 >= التسامح && b - 43 <= التسامح) {frameData.data[i * 4 + 3] = 0; } } returnframeData;}},mounted () {this.video = this.$refs['video']; this.canvas = this.$refs['canvas']; '2d'); this.timer = null; this.video.addEventListener('play', () => { this.width = this.video.videoWidth; this.height = this.video.videoHeight; this.timer && ClearInterval(this.timer = setInterval(() => { this.draw(); }, 50);}}

معالجة الفيديو باستخدام القماش

معالجة البكسل باستخدام القماش

قماش والصور والبكسل