Java如何实现图片裁剪预览功能-Java开发

下面是Java实现图片裁剪预览功能的完整攻略。

下面是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(&quot;reset&quot;)">调整大小</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(&quot;rotate&quot;, -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(&quot;rotate&quot;, 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(&quot;zoom&quot;, 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(&quot;zoom&quot;, -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）实现图片裁剪预览功能的流程。