คัตเอาท์วิดีโอหน้าจอสีเขียวการทำงานของจุดพิกเซลของ Canvas

บทความนี้จะแนะนำการตัดหน้าจอวิดีโอสีเขียวของการทำงานของจุดพิกเซลของ Canvas และแบ่งปันกับทุกคนโดยมีรายละเอียดดังนี้:

การใช้งาน:

 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 (ให้ i = 0; i < this.imgDataLength; i + = 4) { ให้ r = data[i + 0], g = data[i + 1], b = data[i + 2]; data[i + 0] = 255 - r; 1] = 255 - g; data[i + 2] = 255 - b; } ส่งคืน this.frameData;},onCompute2 () {let data = this.frameData.data; for (let i = 0; i < this. 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(ข้อมูล[i + 2] - ข้อมูล[i + 1] + ข้อมูล[i + 2] + ข้อมูล[i]) * ข้อมูล[i] / 256; data[i + 2] = Math.abs(ข้อมูล[i + 2] - ข้อมูล[i + 1] + ข้อมูล[i + 2] + ข้อมูล[i]) * ข้อมูล[i + 1] / 256; } ส่งคืน this.frameData;},...},mounted () { this.canvas = this.$refs['canvas']; this.ctx = this.canvas.getContext('2d'); โหลดซ้ำ();}}

สัปดาห์ที่แล้ว ฉันไปกับเพื่อนร่วมชั้นที่ทะเลไผ่หนานซานในทะเลสาบเทียนมู่ เมืองลี่หยาง ฉันถูกหลอกให้ถ่ายรูปในบริเวณที่มีทิวทัศน์สวยงาม และนี่คือภาพนี้ -

แล้วโดนเพื่อนฝูงวิพากษ์วิจารณ์ว่าตัดภาพออก จริงๆ แล้วถ่ายขณะยืนอยู่หน้าจอสีเขียว :joy:

เครื่องมือไม้กายสิทธิ์ใน PS สามารถเลือกและล้างพิกเซลที่คล้ายกันทั้งหมดภายในระดับความคลาดเคลื่อนของภาพ ทำให้ง่ายต่อการตัดภาพออกด้วยการคลิกเพียงครั้งเดียว หลักฐานก็คือวัตถุจะต้องแตกต่างจากพื้นหลังอย่างมาก กล่าวคือ ยิ่งค่าพิกเซลต่างกันมากเท่าใด การตัดภาพก็จะยิ่งง่ายขึ้นเท่านั้น

Canvas สามารถทำเช่นเดียวกันและสามารถประมวลผลเฟรมวิดีโอได้ หลักการก็เหมือนกัน เพียงตั้งค่าความโปร่งใสของบล็อกพิกเซลหน้าจอสีเขียวในแต่ละเฟรมวิดีโอเป็น 0 แบบนี้ -

การสาธิต

ส่วนหนึ่งของรหัส

 นำเข้า videoUrl จาก './component/video.ogv'; นำเข้า imgUrl จาก './component/sample.jpg'; const TOLERANCE = 5; ส่งออกค่าเริ่มต้น {data () {return {videoUrl: videoUrl,imgUrl: imgUrl}}, วิธีการ: {วาด () {ถ้า (this.video.paused || this.video.ended) { กลับ; }this.ctx.drawImage(this.video, 0, 0, this.width, this.height);this.ctx.putImageData(this.cutOut(), 0, 0);},cutOut () {let frameData = this.ctx.getImageData(0, 0, this.width, this.height),len = frameData.data.length / 4; สำหรับ (ให้ i = 0; i <len; i++) { ให้ 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; } } ส่งคืน frameData;}}, 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); this.timer = setInterval(() => { this.draw(); }, เท็จ);}}

การจัดการวิดีโอโดยใช้ Canvas

การจัดการพิกเซลด้วยผืนผ้าใบ

แคนวาสและรูปภาพและพิกเซล