vue中实现图片旋转（后端Java和前端vue实现图片管理功能）

实现图片管理功能需要分为前端和后端两部分。

前端:

1. 使用vue框架搭建页面，引入element-ui组件库。

2. 通过input[type=file]元素上传图片，使用element-ui的Upload组件进行封装。

3. 在上传时，可以选择是否需要剪裁、旋转和压缩图片，使用element-ui的Dialog和Slider组件进行封装。

4. 在上传完成后，将图片信息发送给后端。

后端：

1. 使用Java语言编写后端代码，使用Spring Boot框架搭建项目。

2. 使用FastDFS作为图片存储系统，将图片保存到FastDFS中。

3. 接收前端传递过来的图片信息，对图片进行剪裁、旋转和压缩操作，并保存到FastDFS中。

4. 将处理后的图片信息返回给前端。

具体实现步骤如下：

前端：

1. 搭建一个基于vue框架的项目，引入element-ui组件库。

2. 创建一个上传组件，使用element-ui的Upload组件进行封装。在组件中添加一个input[type=file]元素，用于选择上传的图片。

<template> <el-upload class="upload-demo" action="/upload" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" :show-file-list="false" :headers="headers"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> <script> export default { data() { return { headers: { 'Authorization': 'Bearer ' localStorage.getItem('token') } } }, methods: { beforeUpload(file) { // 在上传前进行图片剪裁、旋转和压缩操作 // 使用element-ui的Dialog和Slider组件进行封装 this.$confirm('是否需要剪裁、旋转或压缩图片?', '提示', { ConfirmButtonText: '是', cancelButtonText: '否', type: 'warning' }).then(() => { this.$refs.dialog.open() }) return false }, handleSuccess(res) { // 图片上传成功后的处理逻辑 }, handleError(err) { // 图片上传失败后的处理逻辑 } } } </script>

3. 创建一个Dialog组件，用于选择是否需要对图片进行剪裁、旋转和压缩操作。使用element-ui的Dialog和Slider组件进行封装。

<template> <div> <el-dialog title="图片处理" :visible.sync="dialogVisible" width="30%"> <el-form :model="form" label-position="left" label-width="80px"> <el-form-item label="剪裁"> <el-switch v-model="form.crop"></el-switch> </el-form-item> <el-form-item label="旋转"> <el-slider v-model="form.rotate" :min="-180" :max="180" show-input></el-slider> </el-form-item> <el-form-item label="压缩"> <el-slider v-model="form.compress" :min="0" :max="100" show-input></el-slider> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="handleConfirm">确定</el-button> </div> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, form: { crop: false, rotate: 0, compress: 0 } } }, methods: { open() { this.dialogVisible = true }, handleConfirm() { // 确认后，将选择的处理方式传递给父组件进行处理 this.$emit('handle-process', this.form) this.dialogVisible = false } } } </script>

4. 在上传组件中添加一个Dialog组件，用于选择是否需要对图片进行剪裁、旋转和压缩操作。并在beforeUpload事件中调用Dialog组件。

<template> <el-upload class="upload-demo" action="/upload" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" :show-file-list="false" :headers="headers"> <el-button size="small" type="primary">点击上传</el-button> <process-dialog ref="dialog" @handle-process="handleProcess"></process-dialog> </el-upload> </template> <script> import ProcessDialog from './ProcessDialog.vue' export default { components: { ProcessDialog }, data() { return { headers: { 'Authorization': 'Bearer ' localStorage.getItem('token') } } }, methods: { beforeUpload(file) { // 在上传前进行图片剪裁、旋转和压缩操作 this.$refs.dialog.open() return false }, handleProcess(form) { // 处理图片 const file = this.$refs.upload.uploadFiles[0].raw const reader = new FileReader() reader.onload = (e) => { const img = new Image() img.src = e.target.result img.onload = () => { const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') let width = img.width let height = img.height if (form.crop) { // 进行图片剪裁 const cropWidth = Math.min(width, height) const cropHeight = Math.min(width, height) const cropX = (width - cropWidth) / 2 const cropY = (height - cropHeight) / 2 canvas.width = cropWidth canvas.height = cropHeight ctx.drawImage(img, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight) width = cropWidth height = cropHeight img.src = canvas.toDataURL('image/jpeg', 1) } if (form.rotate !== 0) { // 进行图片旋转 const rotate = form.rotate * Math.PI / 180 canvas.width = height canvas.height = width ctx.translate(height / 2, width / 2) ctx.rotate(rotate) ctx.drawImage(img, -width / 2, -height / 2, width, height) width = canvas.width height = canvas.height img.src = canvas.toDataURL('image/jpeg', 1) } if (form.compress !== 0) { // 进行图片压缩 const quality = form.compress / 100 canvas.width = width canvas.height = height ctx.drawImage(img, 0, 0, width, height) img.src = canvas.toDataURL('image/jpeg', quality) } this.uploadFile(img.src) } } reader.readAsDataURL(file) }, uploadFile(base64) { // 将处理后的图片上传到服务器 const formData = new FormData() const blob = this.base64Toblob(base64) formData.append('file', Blob, 'test.jpg') axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data', 'Authorization': 'Bearer ' localStorage.getItem('token') } }).then(res => { console.log(res.data) }) }, base64ToBlob(dataURL) { const arr = dataURL.split(',') const mime = arr[0].match(/:(.*?);/)[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new Blob([u8arr], { type: mime }) }, handleSuccess(res) { // 图片上传成功后的处理逻辑 }, handleError(err) { // 图片上传失败后的处理逻辑 } } } </script>

后端：

1. 在Spring Boot项目中添加FastDFS依赖。

<dependency> <groupId>com.github.tobato</groupId> <artifactId>fastdfs-client</artifactId> <version>1.27.2</version> </dependency>

2. 创建一个上传接口，接收前端上传的图片，并将图片保存到FastDFS中。

@RestController public class UploadController { @Autowired private FastFileStorageClient fastFileStorageClient; @PostMapping("/upload") public String upload(@RequestParam("file") MultipartFile file) throws IOException, MyException { byte[] bytes = file.getBytes(); String originalFilename = file.getOriginalFilename(); String extName = originalFilename.substring(originalFilename.lastIndexOf(".") 1); StorePath storePath = fastFileStorageClient.uploadFile(bytes, extName); return storePath.getFullPath(); } }

3. 创建一个处理图片的接口，接收前端传递过来的图片信息，对图片进行剪裁、旋转和压缩操作，并保存到FastDFS中。

@RestController public class ImageController { @Autowired private FastFileStorageClient fastFileStorageClient; @PostMapping("/image/process") public String processImage(@RequestBody ProcessRequest request) throws IOException, MyException { byte[] bytes = Base64.getdecoder().decode(request.getBase64()); String originalFilename = request.getFilename(); String extName = originalFilename.substring(originalFilename.lastIndexOf(".") 1); StorePath storePath = fastFileStorageClient.uploadFile(bytes, extName); return storePath.getFullPath(); } }

4. 创建一个ProcessRequest类，用于接收前端传递过来的图片信息。

public class ProcessRequest { private String filename; private String base64; public String getFilename() { return filename; } public void setFilename(String filename) { this.filename = filename; } public String getBase64() { return base64; } public void setBase64(String base64) { this.base64 = base64; } }

以上就是使用Java和vue实现图片管理功能的具体步骤。