HTML5按比例缩略图片并上传的实例

来源：互联网发布：收费软件编辑：程序博客网时间：2024/05/17 23:19

上传图片并生成缩略图，一般是先把图片上传到服务器，然后服务端再对图片进行缩略处理，生成缩略图片。

上传到服务器后再生成缩略图有两个缺点：
1.图片尺寸如果过大，上传到服务器的时间会较长。
2.如果所有图片都在服务端做缩略处理，会加大服务端压力。

在客户端缩略图片的优点：
1.减少上传图片的时间，因为最后实际使用的就是缩略后的图片，对用户没有影响。
2.每个上传的客户端都可执行缩略处理，减轻服务器压力。

使用HTML5在客户端按比例缩略图片并上传

原理：
1.使用FileReader读取图片，加载到临时图片对象。
2.创建canvas，把图片按比例缩略，并在画布中画图（使用drawImage方法），获取画图后的base64编码画布数据。
3.使用ajax，把图片的base64编码post到服务器。
4.服务器端接收post的数据，分析图片类型(jpg,gif,png)，把base64_decode后的数据生成对应类型的图片文件。

代码如下：

<!DOCTYPE HTML PUBLIC><html> <head>  <meta charset="utf-8">  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>  <title>HTML5按比例缩略图片并上传的实例</title>  <style type="text/css">    body{margin: 0px; background:#f2f2f0;}    .title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;}    .main{margin:10px auto 10px auto; text-align:center;}    .main .file{padding-left:100px;}    .showimg{margin:10px auto 10px auto; text-align:center;}  </style>  <script type="text/javascript">    window.onload = function(){        // 上传按钮事件        document.getElementById('upload').onclick = function(){            // 图片上传控件            var img = document.getElementById('img').files[0];            // 缩略尺寸            var width = document.getElementById('width').value;            var height = document.getElementById('height').value;            // 判断是否选择图片            if(!img){                alert('请先选择图片');                return ;            }            // 判断图片格式            if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){                alert('图片只能是jpg,gif,png格式');                return ;            }            // 判断width,height            if(isNaN(parseInt(width)) || isNaN(parseInt(height))){                alert('宽或高不正确');                return ;            }            // 缩略图片并上传            resize(img, width, height, upload);        }        // 缩略图片        function resize(img, width, height, callback){            // 创建临时图片对象            var image = new Image;            // 创建画布            var canvas = document.createElement('canvas');            var context = canvas.getContext('2d');            // 临时图片加载            image.onload = function(){                // 图片尺寸                var img_w = image.naturalWidth;                 var img_h = image.naturalHeight;                // 缩略后尺寸                var dimg_w;                var dimg_h;                // 计算缩略尺寸                dimg_w = width;                dimg_h = Math.ceil(dimg_w*img_h/img_w);                if(dimg_h>height){                    dimg_h = height;                    dimg_w = Math.ceil(dimg_h*img_w/img_h);                }                // 定义画布尺寸                canvas.width = dimg_w;                canvas.height = dimg_h;                // 在画布上按缩略尺寸画图                context.drawImage(image, 0, 0, dimg_w, dimg_h);                // 获取画布数据                var imgdata = canvas.toDataURL(img.type);                // 将画布数据回调返回                if(typeof(callback)==='function'){                    callback(imgdata);                }            }            // file reader            var reader = new FileReader();            reader.readAsDataURL(img);            reader.onload = function(e){                image.src = reader.result;            }        }        // 上传图片        var upload = function(imgdata){            $.post("server.php", {img: imgdata}, function(ret){                if(ret.img!=''){                    $('#showimg').html('<a href="' + ret.img + '" target="_blank"><img src="' + ret.img + '"></a>');                }else{                    alert('upload fail');                }            }, 'json');        }  }  </script> </head> <body>  <p class="title">HTML5按比例缩略图片并异步上传的实例</p>  <div class="main">      <p class="file">图片：<input type="file" id="img"></p>      <p>宽：<input type="text" id="width" value="320"></p>      <p>高：<input type="text" id="height" value="240"></p>      <p><input type="button" id="upload" value="按比例缩略图片并上传"></p>  </div>  <p class="showimg" id="showimg"></p> </body></html>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
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

server.PHP

<?php$img = isset($_POST['img'])? $_POST['img'] : '';// 获取图片list($type, $data) = explode(',', $img);// 判断类型if(strstr($type,'image/jpeg')!=''){    $ext = '.jpg';}elseif(strstr($type,'image/gif')!=''){    $ext = '.gif';}elseif(strstr($type,'image/png')!=''){    $ext = '.png';}// 生成的文件名  $photo = time().$ext;// 生成文件file_put_contents($photo, base64_decode($data), true);// 返回header('content-type:application/json;charset=utf-8');$ret = array('img'=>$photo);echo json_encode($ret);?>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
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

这里写图片描述

阅读全文

0 0