快速轮播图片形成延时摄影效果

视频由一帧一帧的图片组成，视频的帧率一般是24FPS，即24帧每秒。

我在同一个位置每隔两秒拍摄一张照片，一共拍摄了200多张。冒出个想法，如果使用代码快速循环播放这些照片，就能形成延时摄影的效果。于是乎，使用最简单的JavaScript实现这一想法。

方案一：网页文档中放一个img标签，使用定时器改变其src属性。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7     <script type="text/javascript">
 8         var isStart = 0;
 9         var timer = null;
10         var index = 14;
11         window.onload=function(){
12             var imagelist = [];
13             var start = 14;
14 
15             while(1){
16                 var image = new Iamge();
17                 var filepre = "DSC000";
18                     
19                     index++;
20                     if(index>99){
21                         filepre="DSC00"
22                     }
23                     if(index>233){
24                         index = 14;
25                         filepre = "DSC000";
26                     }
27                     var filename = filepre + index;
28                 }
29             }
30         }
31         function start(){
32 
33             var img_content = document.getElementById("img_content");
34             
35 
36             if(!isStart){
37                 timer = setInterval(function(){
38                     var filepre = "DSC000";
39                     
40                     index++;
41                     if(index>99){
42                         filepre="DSC00"
43                     }
44                     if(index>233){
45                         index = 14;
46                         filepre = "DSC000";
47                     }
48                     var filename = filepre + index;
49                     console.log(filename);
50                     img_content.src="LROutput/"+filename+".jpg";
51                 },1000/24);
52                 isStart = 1;
53             }
54             else{
55                 console.log("停止")
56                 isStart = 0;
57                 clearInterval(timer);
58             }
59         }
60         
61         
62     </script>
63     <div style="width:600px;height:400px; border:1px solid #ccc;position:relative;left:550px;top:150px">
64         <img src="LROutput/DSC00014.jpg" id="img_content" width="600" height="400">
65     </div>
66     <button  style="position:absolute;left:1100px;top:200px" onclick="start()">start</button>
67 </body>
68 </html>

这种方式有其天然缺陷。每张图片压缩后大概有200K，每秒钟24张，即每秒钟需要下载4.8M，部署在本地基本没问题，如果部署在网络中，至少需要50M的宽带才能负载。

于是乎，另一种方案横空出世，能不能现将图片全部下载下来，然后再播放，这样子开始的时候慢一点，但是加载完后播放是没问题的。

直接上代码

 1 <html><head>
 2     <title></title>
 3 </head>
 4 <body>
 5     <script type="text/javascript">
 6         var isStart = 0;
 7         var timer = null;
 8         var index = 14;
 9         var img_content; 
10         var imgNode ;
11         var imagelist = [];
12         window.onload=function(){
13             img_content = document.getElementById("img_content");
14             var filepre = "DSC000";
15             while(1){
16                     var image = new Image();
17 
18                     if(index>99){
19                         filepre="DSC00"
20                     }
21                     if(index>233){
22                         break;
23                     }
24                     var filename = filepre + index;
25                     image.src="LROutput/"+filename+".jpg";
26                     image.width=600;
27                     image.height=400;
28                     image.id="imgNode"
29                     imagelist.push(image);
30                     index++;
31                 }
32             console.log(imagelist[0])
33             imgNode= document.getElementById("imgNode")
34             img_content.replaceChild(imagelist[0],imgNode)
35         }
36         function start(){
37             var index = 1;
38             if(!isStart){
39                 timer = setInterval(function(){
40                     if(index>imagelist.length-1){
41                         index=0;
42                     }
43                     var imgNode= document.getElementById("imgNode")
44                     img_content.replaceChild(imagelist[index],imgNode)
45                     index++;
46                 },1000/24);
47                 isStart = 1;
48             }
49             else{
50                 console.log("鍋滄")
51                 isStart = 0;
52                 clearInterval(timer);
53             }
54             
55             
56 
57             /*if(!isStart){
58                 timer = setInterval(function(){
59                     var filepre = "DSC000";
60                     
61                     index++;
62                     if(index>99){
63                         filepre="DSC00"
64                     }
65                     if(index>233){
66                         index = 14;
67                         filepre = "DSC000";
68                     }
69                     var filename = filepre + index;
70                     console.log(filename);
71                     img_content.src="LROutput/"+filename+".jpg";
72                 },1000/24);
73                 isStart = 1;
74             }
75             else{
76                 console.log("鍋滄")
77                 isStart = 0;
78                 clearInterval(timer);
79             }*/
80         }
81         
82         
83     </script>
84     <div style="width:600px;height:400px; border:1px solid #ccc;position:relative;left:550px;top:150px" id="img_content">
85         <img src="LROutput/DSC00014.jpg" width="600" height="400" id="imgNode">
86     </div>
87     <button style="position:absolute;left:1100px;top:200px" onclick="start()">start</button>
88 
89 </body></html>
View Code

主要方法是查找img元素，用新的img元素替换之前的元素。

演示地址：http://47.110.65.83:8080/photo/  网络是1M的宽带，耐心等待。大概需要8分钟才能下载完

遗留问题：全部图片大概40多M，所有数据被读取到内存中吗

posted @ 2019-06-24 22:28  tooSimple_sz  阅读(416)  评论(0)  编辑  收藏  举报