Работа с пиксельной точкой холста, видео, вырез на зеленом экране

В этой статье рассказывается о вырезании видео на зеленом экране для операции с пиксельной точкой холста и рассказывается о ней всем. Подробности следующие:

использование:

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

Каштан ниже просто реализует несколько простых эффектов фильтра. Здесь указан конкретный алгоритм. Студенты, изучавшие «цифровую обработку изображений», должны иметь более глубокое понимание этого.

демо

Этот каштан предназначен исключительно для демонстрационных целей. Если вы только подчеркиваете эффект и не заботитесь о данных, вы можете использовать атрибут фильтра CSS3, чтобы сделать это эффективно и легко.

Часть кода

 импортировать imgUrl из './comComponent/sample.jpg';экспортировать по умолчанию {данные () {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) { пусть r = данные[i + 0], g = данные[i + 1], b = данные[i + 2] = 255 - r; 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]) * данные[i] / 256; данные[i + 1] = Math.abs(данные[i + 2] - данные[i + 1] + данные[i + 2] + данные[i]) * данные[i] / 256; данные[i + 2] = Math.abs(данные[i + 2] - данные[i + 1] + данные[i + 2] + данные[i]) * данные[i + 1] / 256; } return this.frameData;},...},mounted () { this.canvas = this.$refs['canvas']; this.ctx = this.canvas.getContext('2d'); перезагрузить();}}

На прошлой неделе я пошел со своими одноклассниками на Бамбуковое море Наньшань на озере Тяньму в Лияне. Меня обманом заставили сфотографироваться в живописном месте, и это была эта фотография.

Потом меня раскритиковали в кругу друзей за то, что я вырезал картинки. На самом деле, это было сделано, когда я стоял перед зеленым экраном :joy:.

Инструмент «Волшебная палочка» в PS может выделять и очищать все похожие пиксели в пределах определенного допуска на изображении, что позволяет легко вырезать изображение одним щелчком мыши. Суть в том, что объект должен значительно отличаться от фона, то есть. чем больше разница в значениях пикселей, тем легче вырезать изображение, тем лучше эффект изображения.

Canvas может делать то же самое и обрабатывать видеокадры. Принцип тот же — просто установите прозрачность блока пикселей зеленого экрана в каждом видеокадре на 0. Так -

демо

Часть кода

 импортировать videoUrl из './comComponent/video.ogv'; импортировать imgUrl из './comComponent/sample.jpg'; const TOLERANCE = 5; экспортировать по умолчанию {данные () {return {videoUrl: videoUrl, imgUrl: imgUrl}}, методы: {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 () {letframeData = 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]; - 100 >= ДОПУСК && g - 100 >= ДОПУСК && b - 43 <= ДОПУСК) {frameData.data[i * 4 + 3] = 0; } } returnframeData;}},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);}}

Манипулирование видео с помощью холста

Манипулирование пикселями с помощью холста

Холст, изображения и пиксели