オンラインカット画像Jcrop

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の4つの値を取得し、サーバーに提出し、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/