在线裁剪图片 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四个值，提交至服务器，由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;    }

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

在线裁剪图片 Jcrop相关推荐

照片怎么裁剪多余部分？如何在线裁剪图片？
平时在处理图片的时候,做的最多的可能就是裁剪图片(https://www.yasuotu.com/editor),将不需要的部分裁剪掉,那么有没有好用图片裁剪工具推荐呢?今天就分享一款在线裁剪图片软件 ...
电脑怎么任意裁剪图片？如何自由裁剪图片？
我们在查看图片时,往往会发现有些不想要的地方需要进行图片裁剪,或者是想要在生活照中单单裁剪出自己的那一部分,应该怎样自由裁剪图片呢?下面告诉大家一个可以在线裁剪图片的方法,利用我们专业的图片处理工具 ...
asp.net实现图片在线上传并在线裁剪
1.说明接上一篇文章uploadify实现多附件上传完成后,又突然用到头像上传并在线裁剪.在网上找个众多例子都没有符合要求的,有一篇文章写的不错,就是文旺老兄写的这篇Asp.Net平台下的图片在线裁 ...
php裁剪图片并上传源码,改写jcrop插件+php的图片上传实现与裁剪一体化
1.图片上传后立刻判断图片的宽和高是否超过预设的最大高度与宽度,超过了则生成缩略图, 2.图片裁剪使用的是jquery的裁剪插件Jcrop,可以实现裁剪的即时预览, 代码没有优化,会生成很多垃圾图片, ...
qt 批量裁剪图片_照片变素描，不用下载App，好用的在线图片处理及图库
我们要处理图片时,无论是在电脑还是手机上,往往都需要下载软件,但如果你只是临时用一下的话,下载软件难免显得工程有点浩大.下面就推荐几个图片处理网站,打开网页就能用. 1.图片处理 funny.pho. ...
怎么自由裁剪图片大小？分享一款在线图片编辑工具
工作的时候常常需要用图片编辑工具把图片裁剪为我们想要的大小,但下载处理图片软件又耗费时间,那么有没有比较快捷的修改图片的方法呢?其实我们可以用在线图片处理(在线ps 图片编辑制作工具免费照片编辑器_ ...
动态图片怎么裁剪？教你在线裁剪gif图片
** 想要裁剪gif动态图片时,应该如何操作呢?这时候,使用[GIF5工具网]的gif裁剪(https://www.gif5.net/)功能就可以完成在线裁剪动图的操作,简单方便,支持自定义裁剪图片尺 ...
支持移动端裁剪图片插件Jcrop（结合WebUploader上传）
(此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存) 最近有一个需求,微信公众号上传图片,支持自定义裁剪. 以前用过一款裁剪插件cropper,很久没用了,不知道对移动端操作兼容如何,重新从网上搜 ...
.net Jcrop 裁剪图片并保存到服务器
Jcrop是一个jQuery插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能 Jcrop使用: 第一步:引入插件插件下载地址:http://deepliquid.com/content/J ...
html5在线裁剪,HTML5 本地裁剪图片并上传至服务器（老梗）
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...

在线裁剪图片 Jcrop

在线裁剪图片 Jcrop相关推荐

最新文章

热门文章