(总结)python--视频与图片之间的转换并制作为3d旋转相册展示
程序员文章站
2022-07-13 09:12:59
...
视频与图片之间的转换并制作为3d旋转相册展示
由于某种原因 想要搞怪一下
准备一个自己喜欢的短视频
将视频转换为图片
import cv2
def getFrame(videoPath, svPath):
cap = cv2.VideoCapture(videoPath)
numFrame = 0
while True:
if cap.grab():
flag, frame = cap.retrieve()
if not flag:
continue
else:
#cv2.imshow('video', frame)
numFrame += 1
newPath = svPath + str(numFrame) + ".jpg"
cv2.imencode('.jpg', frame)[1].tofile(newPath)
if cv2.waitKey(10) == 27:
break
if __name__ == '__main__':
getFrame('C:/Users/Administrator/Desktop/喵星人.mp4','C:/Users/Administrator/Desktop/3d相册/img/')
if cv2.waitKey(10) == 27
这里对这句代码进行说明一下，由于不理解代码去网上查了一下，发现27的含义：ESC的的ASCII码为27
将图片制作为3d旋转相册
1.总体结构展示
2.css文件代码
/*背景页面颜色设置*/
html{
background:linear-gradient(#FFFFE0 0%,#FFFACD 20%);/*背景颜色渐变*/
height: 100%;
color:#66ffff;/*字体颜色*/
}
/*动态样式设置*/
/*最外层容器样式*/
.wrap{
width: 200px;
height: 200px;
/*改变左右上下,图片方块移动*/
margin: 150px auto;
position: relative;
}
/*包裹所有容器样式*/
.cube{
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
-webkit-animation: rotate 20s infinite;
/*匀速*/
animation-timing-function: linear;
}
@-webkit-keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
transition: all .4s;
}
/*定义所有图片样式*/
.pic{
width: 200px;
height: 200px;
}
.cube .out_front{
transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{
transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{
transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{
transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{
transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{
transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式
*/
.cube span{
display: bloack;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic{
width: 100px;
height: 100px;
}
.cube .in_front{
transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{
transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
transform: rotateX(-90deg) translateZ(200px);
}
.hovertreeinfo{text-align:center;}
.hovertreeinfo a{color:white}
3.html文件代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css-3d旋转相册</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="hovertreeinfo">
<h2>喵星人</h2>
</div>
<!--/*外层最大容器*/-->
<div class="wrap">
<!-- /*包裹所有元素的容器*/-->
<div class="cube">
<!--前面图片 -->
<div class="out_front">
<img src="img/1.jpg " class="pic" />
</div>
<!--后面图片 -->
<div class="out_back">
<img src="img/2.jpg" class="pic"/>
</div>
<!--左图片 -->
<div class="out_left">
<img src="img/3.jpg" class="pic" />
</div>
<div class="out_right">
<img src="img/4.jpg" class="pic" />
</div>
<div class="out_top">
<img src="img/5.jpg" class="pic" />
</div>
<div class="out_bottom">
<img src="img/6.jpg" class="pic" />
</div>
<!--小正方体 -->
<span class="in_front">
<img src="img/7.jpg" class="in_pic" />
</span>
<span class="in_back">
<img src="img/8.jpg" class="in_pic" />
</span>
<span class="in_left">
<img src="img/9.jpg" class="in_pic" />
</span>
<span class="in_right">
<img src="img/10.jpg" class="in_pic" />
</span>
<span class="in_top">
<img src="img/11.jpg" class="in_pic" />
</span>
<span class="in_bottom">
<img src="img/12.jpg" class="in_pic" />
</span>
</div>
</div>
</body>
</html>
图片转换为gif
这里我是将上面3d相册的图片转换为gif
import imageio
# 需要合在一起的图片
image_list = [r'C:/Users/Administrator/Desktop/3d相册/cat-img/' + str(x) + ".jpg" for x in range(1,75)]
# gif的图片名
gif_name = r'C:/Users/Administrator/Desktop/jj.gif'
frames = []
for image_name in image_list:
frames.append(imageio.imread(image_name))
# druation : 图片切换的时间，单位秒
imageio.mimsave(gif_name, frames, 'GIF', duration=0.1)
这里制作出来的gif很大需要通过百度(百度搜索动图压缩)在线压缩
成果来啦！！
哈哈哈
这是最近学习的python代码综合运用到这一件事，加深对代码的理解
所以不要问我为啥明明很简单就能得到成果非要兜这么大个圈子
下一篇： MybatisPlus中的分页插件的使用