在线裁剪图片 Jcrop

来源：互联网发布：java sql 格式化工具编辑：程序博客网时间：2024/05/01 03:51

Jcrop 是一个功能强大的 jQuery 图像裁剪插件，结合后端程序可以快速的实现图片裁剪的功能。
1、先将图片上传至服务器，返回上传后的路径显示在客户端，上传成功后设置jcrop

var c = {"x": 0, "y": 0, "x2": 295, "y2": 413, "w": 295, "h": 413};                        $preview = $('#preview-pane');                        $pcnt = $('#preview-pane .preview-container');                        $pimg = $('#preview-pane .preview-container img');                        xsize = $pcnt.width();                        ysize = $pcnt.height();                        $("#uploadIdentityImg").Jcrop({                            bgColor: 'black',                            bgFade: true,                            bgOpacity: .4,                            aspectRatio: 0.71428571 / 1,                            minSize: [295, 413],                            maxSize: [590, 826],                            aspectRatio: xsize / ysize,                            setSelect: [c.x, c.y, c.x2, c.y2],  //设定4个角的初始位置                            onChange: currobj.showCoords,   //当裁剪框变动时执行的函数                            onSelect: currobj.showCoords   //当选择完成时执行的函数                        }, function () {                            // Use the API to get the real image size                            var bounds = this.getBounds();                            boundx = bounds[0];                            boundy = bounds[1];                            // Store the API in the jcrop_api variable                            jcrop_api = this;                            $preview.appendTo(jcrop_api.ui.holder);                        });showCoords: function (c) {            if (parseInt(c.w) > 0) {                var rx = xsize / c.w;                var ry = ysize / c.h;                imgH = parseInt(c.h);                imgW = parseInt(c.w);                imgX = parseInt(c.x);                imgY = parseInt(c.y);                $pimg.css({                    width: Math.round(rx * boundx) + 'px',                    height: Math.round(ry * boundy) + 'px',                    marginLeft: '-' + Math.round(rx * c.x) + 'px',                    marginTop: '-' + Math.round(ry * c.y) + 'px'                });            }        }

2、本地裁剪，获得宽、高、x、y四个值，提交至服务器，由Java代码对图片流进行裁剪，本示例使用的是云存储，所以需要将原文件从云存储上获得流

@RequestMapping("jcripHeadImg")    @ResponseBody    public Map<String,Object> jcripHeadImg(            @RequestParam(required=false,value="imgW",defaultValue="")int imgW,            @RequestParam(required=false,value="imgH",defaultValue="")int imgH,            @RequestParam(required=false,value="imgX",defaultValue="")int imgX,            @RequestParam(required=false,value="imgY",defaultValue="")int imgY,            @RequestParam(required=false,value="imgFileName",defaultValue="")String imgFileName){        //根据文件名 获得文件流        ImageInputStream iis = null;        InputStream is=null;        Map<String,Object> map=new HashMap<>();        map.put("status","n");        try {            String type=imgFileName.substring(imgFileName.lastIndexOf(".")+1,imgFileName.length());            is= remoteFileService.downloadIS(imgFileName, type);            Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(type);            ImageReader reader = it.next();            // 获取图片流            iis = ImageIO.createImageInputStream(is);            /*             * <p>iis:读取源.true:只向前搜索 </p>.将它标记为 ‘只向前搜索’。             * 此设置意味着包含在输入源中的图像将只按顺序读取，可能允许 reader 避免缓存包含与以前已经读取的图像关联的数据的那些输入部分。             */            reader.setInput(iis, true);            ImageReadParam param = reader.getDefaultReadParam();            /*             * 图片裁剪区域。Rectangle 指定了坐标空间中的一个区域，通过 Rectangle 对象             * 的左上顶点的坐标（x，y）、宽度和高度可以定义这个区域。             */            Rectangle rect = new Rectangle(imgX, imgY, imgW, imgH);            // 提供一个 BufferedImage，将其用作解码像素数据的目标。            param.setSourceRegion(rect);            BufferedImage bi = reader.read(0, param);            ImageOutputStream imOut =ImageIO.createImageOutputStream(bi);            InputStream nIs =getImageStream(type,bi);            String newFileName=remoteFileService.upload(nIs, imgFileName , type);            map.put("status","y");            map.put("filename",newFileName);        } catch (IOException e) {            e.printStackTrace();        }        return map;    }/**     * 将图片流文件转为inputstrame流     * @param type     * @param bi     * @return     */public InputStream getImageStream(String type,BufferedImage bi){        InputStream is = null;        ByteArrayOutputStream bs = new ByteArrayOutputStream();        ImageOutputStream imOut;        try {            imOut = ImageIO.createImageOutputStream(bs);            ImageIO.write(bi, type,imOut);            is= new ByteArrayInputStream(bs.toByteArray());        } catch (IOException e) {            e.printStackTrace();        }        return is;    }

官方详细示例：http://code.ciaoca.com/jquery/jcrop/

阅读全文

0 0