H5压缩图片 AJAX上传图片

HTML5 Canvas压缩图片 AJAX上传图片

Canvas压缩图片

封装压缩图片的js

function compress(event, callback){    //var inputID="file";    var file = event.files[0];      var reader = new FileReader();    reader.onload = function (e) {        var image = $('<img />');        image.on('load', function () {            var canvas = document.createElement('canvas');            var width = this.width;            var height = this.height;            canvas.width = this.width;            canvas.height = this.height;            var context = canvas.getContext('2d');            context.clearRect(0, 0, width, height);            context.drawImage(this, 0, 0, this.width, this.height);            var quality = 0.9;//可以理解为压缩程度            //quality :图片质量。0 到 1 之间的数字，并且只在格式为 image/jpeg 或 image/webp 时才有效，如果参数值格式不合法，将会被忽略并使用默认值            var data ;            var result;            var length;            //处理图片过大问题            //控制图片上传的大小，注意若图片过大 ajax上传的时候会出现参数为null的错误            //这里如果图片过大会将图片压缩程度放大            do{                data= canvas.toDataURL('image/jpeg',quality);//压缩图片                length = data.length;                result = ((length/4)*3+1023)/1024;//计算压缩后图片的大小（单位：KB）                console.log("result:"+result);                quality-=0.05;            }while(result>450);            //data：base64            callback(data);//回调函数         });          image.attr('src', e.target.result);       };     reader.readAsDataURL(file);}
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
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

调用compress方法获取base64图片编码并使用AJAX上传

compress($("#imgID"),function(base64Img){    $.ajax({        type:"POST",        url:$("#basePath").val()+"material/uploadMaterial",        data:{            base64Img : base64Img        },        success:function(data){            var result = eval('(' + data + ')');             if(result =='SUC'){                 alert("上传成功");                 return false;             }else{                 alert("上传失败，请稍后重试");                 return false;             }        }    });});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

UploadController.Java

import java.awt.image.BufferedImage;import java.io.ByteArrayInputStream;import java.io.File;import java.io.IOException;import java.util.UUID;import javax.imageio.ImageIO;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.log4j.Logger;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.beans.factory.annotation.Qualifier;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import sun.misc.BASE64Decoder;@Controller@RequestMapping(value="/upload")public class UploadController {    private static final Logger logger = Logger.getLogger(UploadController.class);    @ResponseBody    @RequestMapping("/uploadImg")    public synchronized String uploadImg(String base64Img,            HttpServletRequest request,HttpServletResponse response)                     throws IllegalStateException, IOException{        logger.info("uploadMaterial#####图片...");        String imgName;        String imgPath;        imgName=UUID.randomUUID().toString().replace("-", "")+".jpeg";//生成名字        imgPath="/app/mount/imageServer/material/"+imgName;//上传路径        String[]  strs=base64Img.split(",");        //System.out.println("base64:"+strs[1]);        try {            String data =savePictoServer(strs[1],imgPath);            logger.info("--->>>图片上传成功!::"+data);            return "SUC";        } catch (Exception e) {            logger.info("uploadMaterial######图片转化异常......");            return "图片上传失败，请稍后重试";        }    }    //图片上传    public static String savePictoServer(String base64String,String path)throws Exception{          BASE64Decoder decoder = new sun.misc.BASE64Decoder();                 byte[] bytes1 = decoder.decodeBuffer(base64String);                                  ByteArrayInputStream bais = new ByteArrayInputStream(bytes1);                    BufferedImage bi1 =ImageIO.read(bais);                 File dir=new File(path);                if(!dir.exists()){                 dir.mkdirs();                }                String fileName=path;                File w2 = new File(fileName);//可以是jpg,png,gif格式                    ImageIO.write(bi1, "jpg", w2);//不管输出什么格式图片，此处不需改动                   return fileName;    }}
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
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

使用到的jar包

catalina-manager.jar、commons-fileupload-1.2.1.jar、commons-io-1.3.2.jar