前端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/
相关推荐
爱勇宝8 小时前
小红花成长新版:模板来了,鼓励也更容易开始
前端·后端·程序员
竹林8189 小时前
Solana前端开发:我在一个NFT铸造页面上被@solana/web3.js的Connection和Transaction签名坑了两天
前端
冬奇Lab9 小时前
每日一个开源项目(第144篇):ai-website-cloner-template - 一条命令、多 Agent 并行,把任意网站逆向成 Next.js 代码
前端·人工智能·开源
玄玄子9 小时前
webpack publicPath作用原理
前端·webpack·程序员
HduSy9 小时前
帮 Claude Code 做了个菜单栏 Token 看板,聊聊里面的一些实现逻辑
前端
minglie9 小时前
一个置换问题
javascript
用户0595401744610 小时前
用了6个月LangChain,才发现AI Agent的记忆存储一直有坑——写了23个Pytest用例才彻底修好
前端·css
奶油mm10 小时前
我偷偷把公司的祖传 jQuery 项目改成了 Vue3,CTO 没发现,但全组都来抄我的代码了
前端
用户21366100357210 小时前
Vue2非父子通信与动态组件
前端·vue.js
默_笙10 小时前
🌀 别再手动写 Prompt 了!我让 AI 自己循环改到满意为止
javascript