使用jcrop实现裁切图片

原创 2016年05月30日 18:08:24

jcrop为基于jquery库实现的图片裁切插件。当使用该插件使需要引入jquery和jcrop(包括js文件和css文件)。

 //css文件的引入
 <link rel="stylesheet" type="text/css" href="/Jcrop/css/jquery.Jcrop.min.css">
 //js文件的引入
 <script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="/Jcrop/js/jquery.Jcrop.js"></script>

在项目中,需要实现当点击上传图片时,出现弹出框对上传的图片进行裁切,裁切完成后。点击提交按钮,改变用户的头像。

实现的过程如下:

  1. 点击上传图片按钮,触发ajax请求,将图片上传。上传成功后,触发ajax的回调函数,出现弹出框。
  2. 在弹出框中显示要上传的图片,并且将该图片作为jcrop的实例,对图像进行裁切,同时显示裁切图片的预览图
  3. 点击提交按钮,将jcrop的处理结果作为参数,提交请求。其中jcrop的参数包括相对于原图像的裁切的起点坐标以及裁切的宽度。
  4. 后台处理上传的图片和图片的裁切

前端代码如下

EventUtil.addHandler(userImgUpload, "change", function(e){

    var e = EventUtil.getEvent(e);
    //上传图片 当上传成功后  触发弹出框
    var formd = new FormData();
        formd.append("file",this.files[0]);
        ajax("post","userSet/imgupload", null, formd, function(res){
            var str = "<div class='img-wrap'><div class='upload-origin'><img id='upload-img' src="+JSON.parse(res).img+"></img></div><div class='pre-img'><span id='pre-big'><img id='crop-pre-big' src="
                            +JSON.parse(res).img+"></span><span id='pre-middle'><img id='crop-pre-middle' src="+JSON.parse(res).img+"></span><span id='pre-small'><img id='crop-pre-small' src="+JSON.parse(res).img+
                            "></span></div><input type='hidden' id='x' name='x' />"+
                  "<input type='hidden' id='y' name='y' />"+
                  "<input type='hidden' id='w' name='w' />"+
                  "<input type='hidden' id='h' name='h' />";
    //Popular为弹出框类
    var pop2 = document.querySelector('.p2');
    var p2 = Popuper({
        wrap: pop2,
        type: 'success',
        //confirm: uploadImg,

        cancel: function() {
          alert('cancel callback');
        }

        }).edit({

        title: '头像上传',
        content: str
        }).show();
        p2.toggle().edit({
            type:'info'
        });

//当图片加载完后增加jcrop类

        $("#upload-img").on("load",function(){
            console.log("cheng");
            console.log($("#upload-img"));
            var api = $.Jcrop("#upload-img",{
                boxWidth:300,
                boxHeight:300,
                onChange:showPreview,
                onSelect:showPreview,
                aspectRatio:1
            })
            //初始化选区框的宽高为min(width,height)
            api.setSelect([$("#upload-img").width()>$("#upload-img").height()?1/2*($("#upload-img").width()-$("#upload-img").height()):0,
                                        $("#upload-img").width()>$("#upload-img").height()?0:1/2*($("#upload-img").height()-$("#upload-img").width()),
                                        $("#upload-img").width()>$("#upload-img").height()?1/2*($("#upload-img").width()+$("#upload-img").height()):$("#upload-img").height(),
                                        $("#upload-img").width()>$("#upload-img").height()?$("#upload-img").height():1/2*($("#upload-img").height()+$("#upload-img").width())]);

        })

    })


})
    //当选区框改变时触发的操作
    function showPreview(coords){
        console.log(coords);//返回的是相对于原图像裁切的宽高信息
                $("#x").val(coords.x);
                $("#y").val(coords.y);
                $("#w").val(coords.w);
                $("#h").val(coords.h);
                //预览图的生成 通过改变图片的宽高
                if(parseInt(coords.w)>0){
                    var bigRx = $("#pre-big").width()/coords.w;
                    var bigRy = $("#pre-big").height()/coords.h;
                    console.log(bigRx)
                    $("#crop-pre-big").css({
                        width:Math.round(bigRx*$("#upload-img").width())+"px",
                        height:Math.round(bigRy*$("#upload-img").height())+"px",
                        marginLeft:"-"+Math.round(bigRx*coords.x)+"px",
                        marginTop:"-"+Math.round(bigRy*coords.y)+"px"
                    })

                    var middleRx = $("#pre-middle").width()/coords.w;
                    var middleRy = $("#pre-middle").height()/coords.h;
                    $("#crop-pre-middle").css({
                        width:Math.round(middleRx*$("#upload-img").width())+"px",
                        height:Math.round(middleRy*$("#upload-img").height())+"px",
                        marginLeft:"-"+Math.round(middleRx*coords.x)+"px",
                        marginTop:"-"+Math.round(middleRy*coords.y)+"px"
                    })

                    var smallRx = $("#pre-small").width()/coords.w;
                    var smallRy = $("#pre-small").height()/coords.h;
                    $("#crop-pre-small").css({
                        width:Math.round(smallRx*$("#upload-img").width())+"px",
                        height:Math.round(smallRy*$("#upload-img").height())+"px",
                        marginLeft:"-"+Math.round(smallRx*coords.x)+"px",
                        marginTop:"-"+Math.round(smallRy*coords.y)+"px"
                    })
                }
            }

    $('#crop-form').submit(function(event) {
        event.preventDefault() 
    });
   //点击提交按钮时 将form表单以ajax方式提交 

    $("#upload-submit").on("click",function(e){
        e.stopPropagation();
        console.log("fjkdfajk");
        $.ajax({
            url:"/upload/imgupload/size",
            type:"POST",
            data:$("#crop-form").serialize(),
            success:function(res){
                console.log(res);
            }
        })


    })

对于后端的处理,本文使用的是nodejs

首先是处理上传图片,这里使用的是multer包,上传代码如下:

app.post('/userset/imgupload',upload.single("file"),function(req,res){
//将信息存入文章数据库
var path = "/uploads/"+req.file.filename;
console.log("user");
console.log(req.session.user);
User.update({name: req.session.user.name},{img:path},function(err){
  if(err){
    console.log(err);
  }
  res.send({
    img: path
  })
})
})

当该后台代码执行完成后,触发ajax请求 对图片进行裁切

当裁切完成后,触发ajax请求,将裁切的尺寸和裁切的起点传给后台服务器 ,后台服务器需要裁切图片,这里需要引入imageMagick。imageMagick可以裁剪图片、重置图片大小以及添加水印等操作,具体使用方法请参照gm官方文档。在这里需要注意,引入该包之前需要在本地安装imageMagick。安装完之后在项目中引入imageMagick包,安装imageMagick包和gm包

npm install imageMagick
npm install gm

处理裁切的主要程序如下:

var fs = require('fs');
var gm = require('gm').subClass({imageMagick:true});
var path = require('path');
//param为json对象,包括图片的起始位置和图片裁切的宽度和高度
function ImgCrop(param,callback){
    //新文件的路径 
    var imgdir = path.dirname(param.path);

    var base = path.basename(param.path);
    var filename = base.split('.')[0];
    var newfile = filename + param.rWidth;
    var newpath = path.join(imgdir,newfile+path.extname(param.path));
    //crop:裁切 resize:重置尺寸 stream:将文件以流的形式读取
    gm(path.join("./public", param.path))

        .crop(param.width,param.height,param.x,param.y)
        .resize(param.rWidth,param.rHeight)
        .stream(function(err,stdout){
            if(err){
                throw err;
            }
            //将文件写入指定路径
            var writeStream = fs.createWriteStream(path.join("./public", newpath));
            stdout.pipe(writeStream)
            //这里需要注意path.join连接后的路径以反斜杠分割,这里将反斜杠转化为斜杠
            callback(null,newpath.replace(/\\/g,"\/"));
    })
}
module.exports = ImgCrop;

当使用该模块时 需要引入该模块,并调用

var imgcrop = require('../models/imgcrop.js');
imgcrop({path:user.img,
    width:req.body.w,
    height:req.body.h,
    x:req.body.x,
    y:req.body.y,
    rWidth:200,
    rHeight:200
  },function(err,newpath){
    User.update({name: req.session.user.name},{bigimg:newpath},function(err){
      if(err){
        console.log(err);
      }
      res.send({
        img: newpath
      })
    })

最后裁切时的截图截图如下
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

Jcrop图像裁剪

Jquey Jcrop是一款功能强大的图像裁剪插件,结合服务端的处理可实现图片裁剪,改变等功能。 具有如下特点: 显示图像或块对象。 支持图片的最大,最小值的设置。 有交互性的API,包含动画。 提供...
  • xhwwc110
  • xhwwc110
  • 2015年11月05日 17:18
  • 1274

java 使用Jcrop 实现图像剪裁功能

1.  首先,页面上先引入jquery.js 、jquery.Jcrop.js、jquery.Jcrop.css 这三个文件   然后做好页面上的配置、设计。页面上的设计以及前台js 代码就不在此处粘...
  • who_is_xiaoming
  • who_is_xiaoming
  • 2016年03月07日 10:45
  • 1818

使用jcrop进行头像剪切

项目需要做一个头像截取的功能,类似于QQ头像截取功能。在网上搜了下,最后使用jQuery插件jcrop来截取, 在后台来进行图片切割。         头像截取的原理:在前台使用jcrop获取切面...
  • chenssy
  • chenssy
  • 2013年04月17日 17:22
  • 17375

使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码

1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/案例效果如下:2.引入JCrop的js代码,具体要引入那些js可以...
  • toto1297488504
  • toto1297488504
  • 2015年09月10日 23:55
  • 5638

jcrop 用法小结

官方站点http://deepliquid.com/content/Jcrop.html 。下载了最新版的压缩包,压缩包中包括了Jcrop的几个demo文件,关键的Jcrop.js文件和jQuer...
  • zhaoxuejie
  • zhaoxuejie
  • 2012年08月01日 20:14
  • 9680

使用jquery jcrop插件进行图片的截取与保存

第一步:上传大图片到服务器,并且展示到页面 第二部:调用jcrop组件js及css   第三部:采用插件 进行图片的选取,其中主要包括x,y,width,height    ...
  • guoxu775
  • guoxu775
  • 2012年08月24日 17:58
  • 12953

jquery插件jcrop的初步认识与用法

最近在写项目的过程中,需要用到图像裁切上传,所以接触了插件jcrop。这个插件的裁切功能主要是获取裁切图片后的x坐标,y坐标与裁切图片的宽度和高度。该插件运行后,dom格式如下 关于该插件的源码...
  • charlene0824
  • charlene0824
  • 2016年05月25日 13:26
  • 522

利用Jcrop完成截图保存功能

首先到官网(deepliquid.com/content/Jcrop.html)下载Jcrop插件接下来就是吧你所下载的包解压并放在你的项目里.然后就是各种的配置了,根据你的项目需求,比选择框默认大小...
  • zhushouchen
  • zhushouchen
  • 2015年05月06日 10:19
  • 424

jcrop实现图片区域选择、裁剪及上传

首先说明需要引入哪些文件: jquery.Jcrop.css、jquery.Jcrop.js、JQuery.js 其次说明需要哪些页面: 前端: 1.显示图片以及选择区域的页面re...
  • xiaoxiongbinggan312
  • xiaoxiongbinggan312
  • 2015年01月12日 17:00
  • 483

html Jcrop+canvas实现前端裁剪图片,并上传到服务器

使用Jcrop插件实现裁剪效果,canvas裁剪图片,并把base64位的toDataURL图片转换成blob,最后使用XMLHttpRequest上传到服务器。 预览效果: 整体...
  • unionz
  • unionz
  • 2016年12月12日 16:19
  • 4426
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jcrop实现裁切图片
举报原因:
原因补充:

(最多只允许输入30个字)