webJ

追求自由美好的生活

使用HTML5 canvas 渲染图片 替换img 达到开启 手机 GPU 加速的效果

手机上没有兼容性问题，PC ie9+

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap beign</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="zepto.min.js"></script>
<link href="animate.css" rel="stylesheet" type="text/css">
<style>
   blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul,img{
margin: 0;
padding: 0;
}
   body{background:black;overflow:hidden}
   ul{list-style:none}
   .img-container li {overflow:hidden;float:left;}
   ul img{
   width: 100px;
   height: 100px;
   }
   .large{
width: 100%;
height: 100%;
background: #000;
position: absolute;
top:0;
left: 0;
 
   }
</style>
  <body>
<ul class="img-container clearfix" id="container">
<li><img src="img/1.jpg"></li>
</ul>
<div class="large animated fadeIn" id="large_container" style="display:none">
<img id="large_image">
</div>
 
<script>
    var total = 17;
    var padding = 2;
    var win = $(window);
    var render = function(){
     var pic_width = (win.width() - padding * 3) / 4;  // 每个图片的宽度
     var tmpl = '';
    
     for (var i = 1; i <=total; i++) {
     var p = padding;
     if(i%4 == 1){
     p = 0;
     }
     var imgSrc = 'img/'+i+'.jpg';
     tmpl += '<li data-id="'+ i +'" class="animated shake" style="width:'+ pic_width +'px;height:'+ pic_width +'px;padding-left:'+p+'px;padding-top:'+2+'px;" ><canvas id="cvs_'+ i +'"></canvas></li>';
 
     var imageObj = new Image();
     imageObj.index = i;
     imageObj.onload = function(){
     var cvs = $('#cvs_' + this.index)[0].getContext('2d');
     cvs.width = this.width;
     cvs.height = this.height;
     cvs.drawImage(this,0,0);
     }
     imageObj.src = imgSrc;
 
     };
     $("#container").html(tmpl);
    }
    render();
    
    var wImage = $("#large_image");   // big pic
    var domImage = wImage[0];
 
    var loadImg = function(id,callback){
     $("#large_container").css({
     width:win.width(),
     height:win.height()
     }).show();
 
     var imgsrc = 'img/'+ id + '.large.jpg';
     var ImageObj = new Image();
    
     ImageObj.onload = function(){
     var winWidth = win.width();
     var winHeight = win.height();
     var w = this.width;
     var h = this.height;
     var realw = winHeight*w/h; // 真实展示的宽度
     var realh = winWidth *h/w; //
     var paddingLeft = parseInt((winWidth - realw)/2);   // padding-left
     var paddingTop  = parseInt((winHeight - realh)/2);
     wImage.css('width','auto').css('height','auto');
     wImage.css('paddingLeft','0').css('paddingTop','0');
     if(h/w > 1.2){  // 高度除以宽度大于百分之20的时候 认为是一张竖图
     wImage.attr("src",imgsrc).css('height',winHeight).css('padding-left',paddingLeft);
     }else{
     wImage.attr("src",imgsrc).css('width',winWidth).css('padding-top',paddingTop);
     }
 
     callback&&callback();
 
     }
     ImageObj.src = imgsrc;
    }
    var cid;
    $("#container").delegate("li","tap",function(){
     var _id = cid = $(this).attr("data-id");
     loadImg(_id);
    });
    $("#large_container").tap(function(){
     $(this).hide();
 
    }).swipeLeft(function(){
     cid ++ ;
 
     if(cid > total){
     cid = total;
     }else{
     loadImg(cid,function(){
     wImage.addClass('animated bounceInRight');
     domImage.addEventListener('webkitAnimationEnd',function(){
wImage.removeClass('animated bounceInRight');
domImage.removeEventListener('webkitAnimationEnd');
     },false);
     });
     }
    }).swipeRight(function(){
     cid --;
     if(cid < 1){
     cid = 1;
     }else{
     loadImg(cid,function(){
     wImage.addClass('animated bounceInLeft');
     domImage.addEventListener('webkitAnimationEnd',function(){
wImage.removeClass('animated bounceInLeft');
domImage.removeEventListener('webkitAnimationEnd');
     },false);
     });
     }
    });
 
 
 
</script>
  </body>
</html>

 

发表评论

电子邮件地址不会被公开。