网站建设与管理中网络营销的基本特点是什么?

摘要:d0906网站建设与管理,网络营销的基本特点和描述,做钓鱼网站判刑,四川住建管理平台官网Js去除视频背景 注: 这里的去除视频背景并不是对视频文件进行操作去除背景 如果需要对视频扣除背景并导出可以使用ffmpe
d0906网站建设与管理,网络营销的基本特点和描述,做钓鱼网站判刑,四川住建管理平台官网Js去除视频背景 注#xff1a; 这里的去除视频背景并不是对视频文件进行操作去除背景 如果需要对视频扣除背景并导出可以使用ffmpeg等库#xff0c;这里仅作播放用所以采用这种方法 由于uniapp中的canvas经过封装#xff0c;且 uniapp 的 drawImage 无法绘制视频帧画面 这里的去除视频背景并不是对视频文件进行操作去除背景 如果需要对视频扣除背景并导出可以使用ffmpeg等库这里仅作播放用所以采用这种方法 由于uniapp中的canvas经过封装且 uniapp 的 drawImage 无法绘制视频帧画面因此uniapp中不适用 实现过程是将视频使用canvas逐帧截下来对截取的图片进行处理然后在canvas中显示处理好的图片 最后通过定时器高速处理替换形成视频播放的效果效果如下图⬇ 边缘仍然会有些绿幕的像素可以通过其他的处理进行优化 原理 首先使用canvas的 drawImage 方法将video的当前帧画面绘制到canvas中 然后再通过 getImageData 方法获取当前canvas的所有像素的rgba值组成的数组 获取到的值为[r,g,b,a,r,g,b,a,...]每一组rgba的值就是一个像素所以获取到的数组长度是canvas的像素的数量 * 4 通过判断每一组rgb的值是否为绿幕像素然后设置其透明通道的alpha的值为0实现效果 代码 因为canvas会受到跨域的影响导致画布被污染因此首先需要将测试视频下载到本地 如果直接本地打开html的话同样会因为本地路径报跨域错误需要将htmljs测试视频放在文件夹中部署一个本地服务器 可以使用http-server npm i http-server -g# 切换到存放htmljs测试视频的文件夹 运行命令即可部署本地服务器http-server或者 vsCode的Live server插件均可 测试视频 地址 !DOCTYPE html html langenheadstylevideo{width: 480px;height: 270px;}/style/headbodyvideo idvideo src./63e1dd7ddd2b0.mp4 loop autoplay muted/videocanvas idoutput-canvas width480 height270 willReadFrequentlytrue/canvasscript typetext/javascript srcprocessor2.js/script/body /html// processor2.jslet video, canvas, ctx, canvas_tmp, ctx_tmp;function init () {video document.getElementById(video);canvas document.getElementById(output-canvas);ctx canvas.getContext(2d);// 创建的canvas宽高最好与显示图片的canvas、video宽高一致canvas_tmp document.createElement(canvas);canvas_tmp.setAttribute(width, 480);canvas_tmp.setAttribute(height, 270);ctx_tmp canvas_tmp.getContext(2d);video.addEventListener(play, computeFrame); }function computeFrame () {if (video) {if (video.paused || video.ended) return;}// 如果视频比例和canvas比例不正确可能会出现显示形变 调整除的值进行比例调整ctx_tmp.drawImage(video, 0, 0, video.clientWidth / 1, video.clientHeight / 1);// 获取到绘制的canvas的所有像素rgba值组成的数组let frame ctx_tmp.getImageData(0, 0, video.clientWidth, video.clientHeight);// 共有多少像素点const pointLens frame.data.length / 4;for (let i 0; i pointLens; i) {let r frame.data[i * 4];let g fram
阅读全文