This article introduces the video green screen cutout of canvas pixel point operation and shares it with everyone. The details are as follows:
usage:
context.putImageData(imgData, x, y, dX, dY, dWidth, dHeight);
| parameter | describe |
|---|---|
| imgData | Specifies the ImageData object to be placed back on the canvas. |
| x | The x-coordinate of the upper left corner of the ImageData object, in pixels. |
| y | The y-coordinate of the upper left corner of the ImageData object, in pixels. |
| dX | Optional. Horizontal value (x), in pixels, where to place the image on the canvas. |
| dY | Optional. Horizontal value (y), in pixels, where to place the image on the canvas. |
| dWidth | Optional. The width used to draw the image on the canvas. |
| dHeight | Optional. The height at which the image is drawn on the canvas. |
The chestnut below simply implements several simple filter effects. The specific algorithm is referenced here. Students who have studied "Digital Image Processing" should have a deeper understanding of this.
demo
This chestnut is purely for demonstration purposes. If you only emphasize the effect and don't care about the data, you can use the filter attribute of CSS3 to do it efficiently and easily.
Part of the code
import imgUrl from './component/sample.jpg';export default {data () {return {imgUrl: imgUrl}},methods: {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 - r; data[i + 1] = 255 - g; data[i + 2] = 255 - b; } return 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(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']; this.ctx = this.canvas.getContext('2d'); this. reload();}}Last week, I went with my classmates to the Nanshan Bamboo Sea in Tianmu Lake, Liyang. I was tricked into taking a photo in the scenic area, and it was this one -
Then I was criticized in the circle of friends for cutting out pictures. In fact, it was taken while standing in front of a green screen :joy:.
The magic wand tool in PS can select and clear all similar pixels within a certain tolerance in the picture, making it easy to cut out the image with one click. The premise is that the subject must be significantly different from the background, that is, the greater the difference in pixel values, the easier it is to cut out the image. The better the picture effect.
Canvas can do the same and can process video frames. The principle is the same - just set the transparency of the green screen pixel block in each video frame to 0. Like this -
demo
Part of the code
import videoUrl from './component/video.ogv';import imgUrl from './component/sample.jpg';const TOLERANCE = 5;export default {data () {return {videoUrl: videoUrl,imgUrl: imgUrl}}, methods: {draw () {if (this.video.paused || this.video.ended) { return; }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; for (let i = 0; i < len; i++) { let r = frameData.data[i * 4 + 0], g = frameData.data[i * 4 + 1], b = frameData.data[i * 4 + 2]; if (r - 100 >= TOLERANCE && g - 100 >= TOLERANCE && b - 43 <= TOLERANCE) { frameData.data[i * 4 + 3] = 0; } } return frameData;}},mounted () {this.video = this.$refs['video']; this.canvas = this.$refs['canvas']; this.ctx = this.canvas.getContext( '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(); }, 50); }, false);}} ReferencesManipulating video using canvas
Pixel manipulation with canvas
Canvas and images and pixels