下面是Java实现图片裁剪预览功能的完整攻略。
简介
图片裁剪和预览功能是很多网站或APP必备的功能之一，其中预览功能可以帮助用户选择需要裁剪的具体区域，增加用户的交互体验。而图片裁剪是在预览的基础上对图片进行裁剪，并最终将裁剪后的图片保存到数据库或文件系统中。
Java如何实现图片裁剪预览功能？下面我们将通过两个示例分别介绍基于Java的后端技术和前端技术实现图片裁剪预览功能的方案。
示例1：基于Java的后端技术
准备工作
前置技术：Spring Boot、Spring MVC、Thymeleaf模板引擎、Bootstrap前端框架、alibaba的fastjson
- 创建Spring Boot项目，并导入依赖项。
<!-- Spring Boot Web -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- Bootstrap -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7</version>
</dependency>
<!-- fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency>
- 创建上传文件和裁剪信息实体类。
public class UploadFile {
private MultipartFile file;
// getters and setters
}
public class CropInfo {
private String imgSrc;
private String imgData;
private String imgX;
private String imgY;
private String imgWidth;
private String imgHeight;
// getters and setters
}
实现流程
- 定义前端页面
在Thymeleaf模板引擎中，我们可以使用Bootstrap的modal组件实现一个简单的图片裁剪预览功能。具体的HTML代码可以参考以下示例（为了简化代码，省略了样式和其他不相关的HTML标签）。
<div class="modal fade" id="cropModal" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<img id="crop-img" crossorigin="anonymous"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary"
onclick="submitCropInfo()">确认</button>
</div>
</div>
</div>
</div>
<form method="post" enctype="multipart/form-data" action="#" th:action="@{/crop}">
<div class="form-group">
<input type="file" name="file" onchange="previewImage()" />
</div>
<div class="form-group">
<input type="text" id="img-data" name="uploadInfo.imgData"
class="form-control" />
</div>
<div class="form-group">
<input type="text" id="img-x" name="cropInfo.imgX"
class="form-control" />
</div>
<div class="form-group">
<input type="text" id="img-y" name="cropInfo.imgY"
class="form-control" />
</div>
<div class="form-group">
<input type="text" id="img-w" name="cropInfo.imgWidth"
class="form-control" />
</div>
<div class="form-group">
<input type="text" id="img-h" name="cropInfo.imgHeight"
class="form-control" />
</div>
<div class="form-group">
<button type="button" class="btn btn-info"
onclick="$('#cropModal').modal('show')">查看图片</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>
- 实现预览和裁剪功能
在前端代码中，我们需要使用HTML5的FileReader对象来预览上传的图片，并使用canvas标签和JavaScript来完成图片的裁剪。
// 预览图片，同时绑定裁剪事件
function previewImage() {
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onload = function (event) {
var img = document.getElementById("crop-img");
img.classList.remove("cropper-hidden");
img.src = event.target.result;
};
reader.readAsDataURL(file);
}
// 提交裁剪信息
function submitCropInfo() {
var canvasData = $('#crop-img').cropper('getData');
$('#img-data').val(canvasData['imageData']);
$('#img-x').val(canvasData['x']);
$('#img-y').val(canvasData['y']);
$('#img-w').val(canvasData['width']);
$('#img-h').val(canvasData['height']);
$('#cropModal').modal('hide');
}
- 后端接收数据并裁剪图片
后端代码中，我们需要使用Java的File、BufferedImage、以及ImageIO等相关API对上传的图片进行裁剪，并将裁剪后的图片存储到指定位置。
@PostMapping("/crop")
public String cropImage(@RequestParam("file") MultipartFile file,
@ModelAttribute(value="uploadInfo") UploadFile uploadInfo,
@ModelAttribute(value="cropInfo") CropInfo cropInfo) {
try {
// Get the file and save it somewhere
byte[] bytes = file.getBytes();
Path path = Paths.get(UPLOAD_FOLDER + file.getOriginalFilename());
Files.write(path, bytes);
BufferedImage image = ImageIO.read(path.toFile());
// 构造裁剪区域
int width = Integer.parseInt(cropInfo.getImgWidth().split("\\.")[0]);
int height = Integer.parseInt(cropInfo.getImgHeight().split("\\.")[0]);
int x = Integer.parseInt(cropInfo.getImgX().split("\\.")[0]);
int y = Integer.parseInt(cropInfo.getImgY().split("\\.")[0]);
Rectangle rect = new Rectangle(x, y, width, height);
// 裁剪图片
BufferedImage croppedImage = image.getSubimage(x, y, width, height);
// 保存裁剪后的图片
File outputfile = new File("cropped.jpg");
ImageIO.write(croppedImage, "jpg", outputfile);
return "redirect:/success.html";
} catch (IOException e) {
e.printStackTrace();
return "redirect:/error.html";
}
}
示例2：基于前端技术
准备工作
前置技术：jQuery、cropper.js
- 在HTML中引用相关的JavaScript和CSS文件。
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.1.6/cropper.min.css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.1.6/cropper.min.js"></script>
实现流程
- 准备前端页面
在前端代码中，我们需要使用选用上传的图片并使用cropper.js实现图片裁剪预览功能。
<div class="row">
<div class="col-md-6">
<div>
<img id="image" src="https://via.placeholder.com/360x360"
alt="Picture">
</div>
<br>
<input type="file" id="inputImage" accept="image/*">
</div>
<div class="col-md-6">
<div>
<img id="preview" alt="Preview"
style="max-width: 100%;">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-group">
<button class="btn btn-primary" data-method="reset"
title="Reset">
<span class="docs-tooltip" data-toggle="tooltip"
title="$().cropper("reset")">调整大小</span>
</button>
<button class="btn btn-primary" data-method="rotate"
data-option="-45" title="Rotate Left">
<span class="docs-tooltip" data-toggle="tooltip"
title="$().cropper("rotate", -45)">逆时针旋转</span>
</button>
<button class="btn btn-primary" data-method="rotate"
data-option="45" title="Rotate Right">
<span class="docs-tooltip" data-toggle="tooltip"
title="$().cropper("rotate", 45)">顺时针旋转</span>
</button>
<button class="btn btn-primary" data-method="zoom"
data-option="0.1" title="Zoom In">
<span class="docs-tooltip" data-toggle="tooltip"
title="$().cropper("zoom", 0.1)">放大</span>
</button>
<button class="btn btn-primary" data-method="zoom"
data-option="-0.1" title="Zoom Out">
<span class="docs-tooltip" data-toggle="tooltip"
title="$().cropper("zoom", -0.1)">缩小</span>
</button>
</div>
</div>
</div>
- 使用JavaScript实现裁剪和预览功能
在前端JavaScript代码中，我们需要使用jQuery获取DOM元素并初始化cropper.js。然后通过cropper.js提供的相关API实现图片的裁剪和预览功能。
var $image = $('#image');
var $inputImage = $('#inputImage');
$(function () {
$inputImage.change(function () {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
blobURL = URL.createObjectURL(file);
$image.one('built.cropper', function () {
URL.revokeObjectURL(blobURL);
}).cropper({
preview: '#preview',
aspectRatio: 16 / 9
});
$inputImage.val('');
} else {
window.alert('Please choose an image file.');
}
}
});
// Export preview
$('#getDataURL').on('click', function () {
$('#dataURLModal').modal('show').find('.modal-body').html('<img src="' + $image.cropper('getCroppedCanvas').toDataURL('image/jpeg') + '">');
});
// Methods
$('.docs-buttons').on('click', '[data-method]', function () {
var $this = $(this);
var data = $this.data();
$image.cropper(data.method, data.option);
});
});
以上就是基于前端技术（JavaScript）实现图片裁剪预览功能的流程。
总结
本文从两个不同的角度介绍了Java如何实现图片裁剪预览的功能，分别是基于Java后端技术和基于前端技术。通过这两个示例，希望能够为读者提供灵活且适合自己场景的方案。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Java如何实现图片裁剪预览功能 - Python技术站
微信扫一扫 
支付宝扫一扫 