本人是刚毕业的新手，最近公司的一个项目，前后端分离，前端Vue，后端使用spring boot。其中有一个需求是需要做前端上传的图片需要压缩才能上传。为此在网上查找资料，并做了简单的实现。
那么一步来
一。前端
1.先写界面，考虑到时间问题，就先写个简单的页面，创建个Imagepress.vue
<template>
<div>
<input id="inputele" type="file" accept="image/*" @change="readImg">
<canvas id="canvasImg" ></canvas>
</div>
</template>
2.当用户点击,上传图片时，触发change事件，调用readImg方法。readImg方法如下：
readImg: function(e){
let that=this
console.log('123')
let file = e.target.files[0]
let reader = new FileReader()
let img = new Image()
reader.readAsDataURL(file)
//console.log(file)
let canvas = document.getElementById('canvasImg');
let context = canvas.getContext('2d');
reader.onload = function(e) {// 文件base64,可以看看结果
img.src = e.target.result;
//console.log('文件base64,可以看看结果'+img.src);
}
img.onload=function(){
let w=this.width,h=this.height
let width=w,height=h
let size=400
if (w>=h&&w>size) {//宽>高
width=size
height=size/w*h
} else if (w<h&&h>size) {
height=size
width=size/h*w
}
let canvas = document.getElementById('canvasImg');
let context = canvas.getContext('2d');
//计算画布的大小
canvas.width=width
canvas.height=height
context.clearRect(0,0,width,height)
//img重新画到特定大小的画布上
context.drawImage(img,0,0,width,height)
//画完之后的互补就是压缩之后的图片canvas
//缩略图canvas转为二进制的数据用于上次
// canvas.toBlob(function(blob){
// console.log('哈哈，开始上传压缩的图片了')
// console.log(blob)
// that.$http.post('http://127.0.0.1:8088/index',blob)
// })
let newData=canvas.toDataURL("image/png",0.3)
console.log(typeof(newData))
let files=new Array()
files.push(newData)
that.$http.post('http://localhost:8088/index',files)
}
}
a.首先是fileReader 读取上传上来的图片file，
b.计算canvas画布的大小，将读取的img重新画到特定到校的画布上
c.最后调用cavas.toDataURL("image/png",0.3)进行压缩，该方法有2个参数，第一个是指定图片的格式，第二个参数是指定压缩图片的质量，取值在0-1之间，返回值是一个 data URI 的DOMString。
页面效果
按F12打开开发者工具
可以看到已经向后台发起请求了。
二。后端
后端我是使用的是spring boot，至于spring boot的细节在这里就不赘述了。
在前端我们请求的地址是http://localhost:8088/index
所以后台代码
@RequestMapping(value="/index",method=RequestMethod.POST)
public String uploadimg(@RequestBody String[] files) throws Exception{
}
具体代码如下
@RequestMapping(value="/index",method=RequestMethod.POST)
public String uploadimg(@RequestBody String[] files) throws Exception{ if(files==null||files.length==0)
return null;
String data="";
String dataprefix=""; for(String file:files){
String[] str=file.split("base64,");
if(str==null||str.length!=2)
return null;
dataprefix=str[0];
data=str[1];
String suffix = "";
if("data:image/jpeg;".equalsIgnoreCase(dataprefix)){//data:image/jpeg;base64,base64编码的jpeg图片数据
suffix = ".jpg";
} else if("data:image/x-icon;".equalsIgnoreCase(dataprefix)){//data:image/x-icon;base64,base64编码的icon图片数据
suffix = ".ico";
} else if("data:image/gif;".equalsIgnoreCase(dataprefix)){//data:image/gif;base64,base64编码的gif图片数据
suffix = ".gif";
} else if("data:image/png;".equalsIgnoreCase(dataprefix)){//data:image/png;base64,base64编码的png图片数据
suffix = ".png";
}else{
throw new Exception("上传图片格式不合法");
} //因为BASE64Decoder的jar问题，此处使用spring框架提供的工具包
byte[] bs = Base64Utils.decodeFromString(data);
//FileUtils.writeByteArrayToFile(new File(savepath+System.currentTimeMillis()+suffix), bs);
FileOutputStream out=new FileOutputStream(new File(savepath+System.currentTimeMillis()+suffix));
out.write(bs);
out.flush();
out.close();
}
return "开始上传图片";
}
具体图片的保存地址我配置在了application.yml中，具体如下
server:
port: 8088
savepath: E:/images/
发现压缩的图片也保存好了，查看图片的大小，发现图片确实变小了。
现在基本完成图片的压缩上传。在手机端也是没有问题的。
作为刚毕业没毕业多久的人，肯定还有不足，若有不足请各位大佬多多提醒。这是第一篇博客，也请各位多多留言。