1.安装
工程目录下运行cmd
npm install vue-cropper -S
2.引用组件
全局引入,在main.js中添加
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
3.使用裁剪框
这里httpUrl可以随意选择一张网络图片的连接作测试
<!-- 图片裁剪框 -->
<div style="width: 400px;height: 400px;">
<vue-cropper autoCrop :img="httpUrl" ref="cropper" centerBox fixed :fixedNumber="[1,1]"/>
</div>
<button @click="getCropData()">获取截图后图片</button>
获取的数据是base64的格式,发送给后端进行解码。
//获取裁剪后图片
getCropData(){
this.$refs.cropper.getCropData(data=>{
console.log(data);
//发起axios post请求
this.$http.post("/saveImg",
{
base64ImageData:data,
}
)
.then((response)=>{
if(response.data.code === 0){//发送成功
this.$message({
message: '截取成功!!!',
type: 'success',
});
this.$router.go(0);
}
else{
this.$message.error(response.data.data.message);
}
})
.catch((error)=>{
//未接受到response的网络传输等错误
console.log(error);
});
})
},
后端代码根据实际情况可能有稍微差别,主要提供思路(这里默认保存为jpg格式,其它格式需要改后缀)
//存储截取后的图片
@PostMapping("/saveImg")
public CommonResult<Object> saveImg(@RequestBody String base64ImageData){
//先解析token是否合法
User currentUser = JwtTokenUtils.getCurrentUser();
// 去掉base64前缀 data:image/jpeg;base64,一定一定 同时去掉末尾"}两个符号
base64ImageData = base64ImageData.substring(base64ImageData.indexOf(",", 1) + 1,base64ImageData.length() - 2);
//解码为二进制
byte[] imageBytes = Base64.getDecoder().decode(base64ImageData);
String outputPath = System.getProperty("user.dir")+"/upload/image/" + currentUser.getImg();
Path path = Paths.get(outputPath);
try {
//存在则覆盖,不存在则新建
Files.write(path, imageBytes, StandardOpenOption.WRITE);
return CommonResult.success();
} catch (IOException e) {
// 输出文件发生写入错误信息
e.printStackTrace();
return CommonResult.failed(ErrorCode.FILE_WRITE_FAIL.getCode(), Message.createMessage(ErrorCode.FILE_WRITE_FAIL.getMessage()));
}
}