Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use canvas tag matting in html5". In daily operation, I believe many people have doubts about how to use canvas tag in html5. Xiaobian consulted all kinds of data and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the question of "how to use canvas tag matting in html5". Next, please follow the editor to study!

The details are as follows:

Usage:

Context.putImageData (imgData, x, y, dX, dY, dWidth, dHeight); the parameter describes the ImageData object that the imgData specifies to put back on the canvas. The x-coordinate of the upper-left corner of the xImageData object, in pixels. The y-coordinate of the upper-left corner of the yImageData object, in pixels. DX is optional. The horizontal value (x), in pixels, where the image is placed on the canvas. DY is optional. The horizontal value (y), in pixels, where the image is placed on the canvas. DWidth is optional. The width used to draw the image on the canvas. DHeight is optional. The height at which the image is drawn on the canvas.

The following chestnuts simply achieve a few simple filter effects, the specific algorithm reference here, students who have studied "digital image processing" should have a deeper understanding of this.

Demo

The chestnut is done purely to demonstrate the function, and it can be done efficiently and easily with the filter attribute of CSS3 if you only emphasize the effect and don't care about the data.

Partial 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(); }} PS中魔法棒工具可以把图片中一定容差下的相近像素都选中、清空，轻松做到一键"抠图"，前提是主体一定要与背景有大的差异，即像素值差值越大，抠图效果越好。 Canvas同样可以做到，并且可以处理视频帧，其中的原理是一样的 -- 将每个视频帧中绿幕的像素块透明度置0即可。像这样 -- demo 部分代码 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 {this.width = this.video.videoWidth; this.height = this.video.videoHeight; this.timer & & clearInterval (this.timer); this.timer = setInterval (() = > {this.draw () }, 50);}, false);} at this point, the study on "how to use the canvas tag matting in html5" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.