前端vue后端java如何实现证件照功能

先看效果,支持各种不同场景证件照,照片可以任意上传,系统会自动裁剪证件照的上半身部分,智能裁剪,可以可自定义裁剪:https://office.zjdiante.com/imageTool/imageIdPhoto

思路:目前我对接的是阿里云平台的抠图

1.上传图片后调用阿里云抠图接口(DetectFace),如果使用阿里云OSS,必须选择上海地区的bucket,否则无法处理图片

java 复制代码
 /**
     * 人脸检测与五官定位
     *
     * @param imageUrl 图片OSS URL
     * @return 检测结果,包含人脸信息
     */
    public FaceDetectResult detectFace(String imageUrl) throws Exception {
        log.info("开始人脸检测,图片URL: {}", imageUrl);

        // 使用HTTP直接调用API
        String apiUrl = "https://facebody.cn-shanghai.aliyuncs.com/";
        String apiPath = "/";
        
        // 构建请求参数
        String timestamp = java.time.ZonedDateTime.now(java.time.ZoneId.of("UTC"))
                .format(java.time.format.DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss'Z'"));
        
        java.util.Map<String, String> params = new java.util.HashMap<>();
        params.put("Action", "DetectFace");
        params.put("ImageURL", imageUrl);
        params.put("Landmark", "true");  // 返回人脸的特征点定位
        params.put("Quality", "true");   // 返回人脸质量
        params.put("Pose", "true");      // 返回人脸姿态
        params.put("MaxFaceNumber", "10"); // 最多检测10张人脸
        params.put("Format", "JSON");
        params.put("Version", "2019-12-30");
        params.put("AccessKeyId", accessKeyId);
        params.put("SignatureMethod", "HMAC-SHA1");
        params.put("Timestamp", timestamp);
        params.put("SignatureVersion", "1.0");
        params.put("SignatureNonce", String.valueOf(System.currentTimeMillis()));

        // 生成签名
        String signature = imagePubUtils.generateSignature(params, "POST", apiPath, accessKeySecret);
        params.put("Signature", signature);

        // 发送HTTP请求
        String responseJson = imagePubUtils.sendHttpRequest(apiUrl, params);
        
        log.debug("人脸检测API响应: {}", responseJson);
        
        // 解析响应
        com.alibaba.fastjson2.JSONObject responseObj = com.alibaba.fastjson2.JSON.parseObject(responseJson);
        
        // 检查错误
        if (responseObj.containsKey("Code") && !"Success".equals(responseObj.getString("Code"))) {
            String errorMsg = responseObj.getString("Message");
            String errorCode = responseObj.getString("Code");
            throw new RuntimeException("人脸检测API调用失败: Code=" + errorCode + ", Message=" + errorMsg);
        }

        // 解析结果
        com.alibaba.fastjson2.JSONObject data = responseObj.getJSONObject("Data");
        if (data == null) {
            throw new RuntimeException("API响应数据为空");
        }

        FaceDetectResult result = new FaceDetectResult();
        result.setFaceCount(data.getInteger("FaceCount"));
        
        // 解析人脸矩形坐标(格式:[x, y, width, height])
        List<Integer> faceRectangles = data.getList("FaceRectangles", Integer.class);
        if (faceRectangles != null && faceRectangles.size() >= 4) {
            result.setFaceX(faceRectangles.get(0));
            result.setFaceY(faceRectangles.get(1));
            result.setFaceWidth(faceRectangles.get(2));
            result.setFaceHeight(faceRectangles.get(3));
        }

        // 解析人脸置信度
        List<Double> faceProbabilityList = data.getList("FaceProbabilityList", Double.class);
        if (faceProbabilityList != null && !faceProbabilityList.isEmpty()) {
            result.setFaceProbability(faceProbabilityList.get(0));
        }

        log.info("人脸检测成功,检测到{}张人脸,置信度: {}", result.getFaceCount(), result.getFaceProbability());
        return result;
    }

2.抠图后把图片返回图片给前端,前端用画布处理,如果你觉得自动裁剪的不合适,你可以自己裁剪

3.裁剪后选择右侧的颜色和对应的尺寸,渲染在画布上的图片,点击制作后,把相关参数传给后端

,后端使用图片处理的流裁剪渲染一下就行了,简单看一下入参:

java 复制代码
 /**
     * 支持纯色背景、渐变背景和自定义颜色
     * 支持美肤、瘦脸、美妆等可选功能
     *
     * @param file 原始图片文件(必填),支持格式:JPG、PNG、GIF、BMP、WEBP
     * @param width 目标宽度(必填),单位:像素,例如:413(小二寸宽度)
     * @param height 目标高度(必填),单位:像素,例如:531(小二寸高度)
     * @param sizeName 尺寸名称(必填),例如:一寸、小二寸、二寸等,用于生成文件名
     * @param colorType 颜色类型(必填),可选值:
     *                  <ul>
     *                    <li>solid - 纯色背景,需要提供 backgroundColor 参数</li>
     *                    <li>gradient - 渐变背景,需要提供 backgroundColorFrom 和 backgroundColorTo 参数</li>
     *                    <li>custom - 自定义颜色,需要提供 backgroundColor 参数</li>
     *                  </ul>
     * @param backgroundColor 背景颜色(条件必填),十六进制颜色值,例如:#FFFFFF(白色)、#FF0000(红色)
     *                       当 colorType 为 solid 或 custom 时必填
     * @param backgroundColorFrom 渐变起始颜色(条件必填),十六进制颜色值,例如:#FF0000(红色)
     *                           当 colorType 为 gradient 时必填
     * @param backgroundColorTo 渐变结束颜色(条件必填),十六进制颜色值,例如:#FFFFFF(白色)
     *                         当 colorType 为 gradient 时必填
     * @param enableBeautify 是否启用美肤(可选),默认false
     * @param enableSlim 是否启用瘦脸(可选),默认false
     * @param menuId 菜单 ID(可选);传入时写入 {@code off_tool_use_record_histroy} 并将成片异步上传 OSS
     * @return ResponseEntity<InputStreamResource> 返回处理后的证件照图片(JPG格式图片流)
     *         响应头包含 Content-Type: image/jpeg 和 Content-Disposition: attachment; filename=xxx.jpg
     * @throws Exception 处理异常时返回 HTTP 500 错误
     */
    @PostMapping("/generateIdPhoto")
    public ResponseEntity<InputStreamResource> generateIdPhoto(
            @RequestParam("file") MultipartFile file,
            @RequestParam("width") int width,
            @RequestParam("height") int height,
            @RequestParam("sizeName") String sizeName,
            @RequestParam("colorType") String colorType,
            @RequestParam(value = "backgroundColor", required = false) String backgroundColor,
            @RequestParam(value = "backgroundColorFrom", required = false) String backgroundColorFrom,
            @RequestParam(value = "backgroundColorTo", required = false) String backgroundColorTo,
            @RequestParam(value = "enableBeautify", required = false, defaultValue = "false") Boolean enableBeautify,
            @RequestParam(value = "enableSlim", required = false, defaultValue = "false") Boolean enableSlim,
            @RequestParam(value = "menuId", required = false) Long menuId) {
复制代码
想做类似的功能可以联系我,打开项目加我联系方式就行了:https://office.zjdiante.com/
相关推荐
come11234几秒前
Vue 2 与 Vue 3 语法区别及使用技巧
前端·javascript·vue.js
腻害兔12 分钟前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:ERP 企业资源模块,一个轻量级进销存的完整实现?
前端·javascript·vue.js·人工智能·前端框架·产品经理·ai编程
虹科网络安全24 分钟前
艾体宝新闻|从 SQL 注入到服务器接管:CVE-2026-57517 暴露 Web 管理面板的供应链与安全编码风险
服务器·前端·sql
糖果店的幽灵30 分钟前
langgraph的四种state解析
java·前端·javascript·langgraph
顺颂时绥_144 分钟前
前端大图片压缩与安卓/苹果设备矫正实践
前端
Allshadow44 分钟前
Nest.js - 目录结构
javascript·nestjs
Csvn1 小时前
JSON.parse 大数精度丢失:一个让前后端互相甩锅的 Bug
前端
Simon_He1 小时前
AI 对话里的流式 Markdown 为什么难:从不完整 Token 到增量渲染
vue.js
张元清1 小时前
React useCookie Hook:把 Cookie 变成响应式状态(2026)
javascript·react.js
达子6661 小时前
第4章_图解HarmonyOS 的结构
vue.js