تقدم هذه المقالة مقطع فيديو للشاشة الخضراء لعملية نقطة بكسل اللوحة القماشية ومشاركتها مع الجميع، والتفاصيل هي كما يلي:
الاستخدام:
context.putImageData(imgData, x, y, dX, dY, dWidth, dHeight);
| المعلمة | يصف |
|---|---|
| imgData | يحدد كائن ImageData المراد وضعه مرة أخرى على اللوحة القماشية. |
| س | إحداثي x للزاوية العلوية اليسرى لكائن ImageData، بالبكسل. |
| ذ | الإحداثي y للزاوية العلوية اليسرى لكائن ImageData، بالبكسل. |
| دي اكس | خياري. القيمة الأفقية (x)، بالبكسل، مكان وضع الصورة على القماش. |
| دي | خياري. القيمة الأفقية (y)، بالبكسل، مكان وضع الصورة على القماش. |
| عرض | خياري. العرض المستخدم لرسم الصورة على القماش. |
| الارتفاع | خياري. الارتفاع الذي يتم عنده رسم الصورة على القماش. |
يقوم الكستناء أدناه بتنفيذ العديد من تأثيرات المرشح البسيطة، ويجب أن يكون لدى الطلاب الذين درسوا "معالجة الصور الرقمية" فهم أعمق لهذا الأمر.
تجريبي
هذا الكستناء مخصص للأغراض التوضيحية فقط، إذا ركزت فقط على التأثير ولم تهتم بالبيانات، فيمكنك استخدام سمة التصفية في 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);}} مراجعمعالجة الفيديو باستخدام القماش
معالجة البكسل باستخدام القماش
قماش والصور والبكسل