实现抖音视频抖动效果---OpenCV-Python开发指南(53)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实现抖音视频抖动效果---OpenCV-Python开发指南(53)相关的知识,希望对你有一定的参考价值。

参考技术A 感兴趣的不妨随便弄一个视频使用抖音抖动效果观察。这里,博主建议读者使用国际象棋的视频图像,这种方块的格式更能看清细微的抖动变化。

我们观察抖音抖动视频会发现,抖动效果的原理是对视频中的一些帧进行剪切和放大到原图,出现视频中的人或者物体放大颤动的效果,并因为视觉残留出现闪影效果。

换到OpenCV中进行处理,就可以分为以下几个步骤:

按照原理,我们先读取视频,或者直接使用摄像头。然后获取图像的帧数FPS,同时获取图像的中心Center,将图像按比例剪裁20%之后,在放大至原图。

下面,我们来实现视频抖动效果:

运行之后,效果如下:

原生js实现图片抖动效果

今天来写一个关于图片抖动的效果,需求是:点击图片,让其抖动几下停止(类似于苹果手机填错密码之后会抖一下的效果),其实想要实现这个效果,原理就是,点击之后,让其左移动下然后右移动一下(每移动一下减几像素知道减到0),然后将其放入定时器内,让其慢慢自动停下来。来看代码布局:

<style>
        #img{position:absolute;left:30px;}
    </style>

<body>
<!--需求:点击图片,图片会抖动几下-->
<img id="img" width="180" src="img/pic4.jpg"/>
</body>

接下来就是js的实现:

<script>

    //兼容不同浏览器获取行间样式
    function getStyle ( obj, attr ) {
        return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
    }

    window.onload=function(){
        //第一步先追加多个div
        var oImg=document.getElementById("img");
        //添加点击事件
        oImg.onclick=function(){
            //先获取图片自身所在的left值
            var pos=parseFloat(getStyle(oImg,"left"));

            var arr=[];
            var num=0;
            var timer=null;
            //抖动频率de数组,一正一负[20,-20,18,-18...]
            for(var i=20;i>0;i-=2){
                arr.push(i,-i)
            }
            arr.push(0);
            //启用定时器前先关闭定时器
            clearInterval(timer);
            
            timer=setInterval(function(){
                //让图片的left跟随数组里的值变化就会实现左右移动效果
                oImg.style.left=pos+arr[num]+"px";

                num++;
                if(num===arr.length){
                    clearInterval(timer);
                }
            },50)

        };
        
    };
    
</script>

 这样就实现了点击一下图片,图片将会抖动几下慢慢停下了。抖动原理其实就是元素的自动左右移动,所以一定要用到setInterval。可以试一下哦!

好了,今天就这样了!

以上是关于实现抖音视频抖动效果---OpenCV-Python开发指南(53)的主要内容,如果未能解决你的问题,请参考以下文章

原生js实现图片抖动效果

HarmonyOS鸿蒙学习笔记(15)Swiper实现抖音切换视频播放效果

HarmonyOS鸿蒙学习笔记(15)Swiper实现抖音切换视频播放效果

HarmonyOS鸿蒙学习笔记(15)Swiper实现抖音切换视频播放效果

Verilog实现按键消抖

基于机器学习的视频防抖处理