使用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进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码

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

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

使用Jcrop插件实现裁剪效果,canvas裁剪图片,并把base64位的toDataURL图片转换成blob,最后使用XMLHttpRequest上传到服务器。 预览效果: 整体...
  • unionz
  • unionz
  • 2016年12月12日 16:19
  • 3612

node.js(express)中使用Jcrop进行图片裁切上传

需求说明简单来说就是要实现用户上传头像,并且要保存用户裁切后的部分作为用户头像。 第一步,选择图片: 第二步,在弹窗页面中展现并进行裁切: 第三步,点击“保存”,上传服务器。实现过程说来有点坎坷...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Jcrop裁剪图片[一] :前端js总结

最近项目中有一个截取图片的效果,于是在用到了Jcrop框架,使用中看API然后网上查阅一些文章勉勉强强算完成了这个功能,现将过程总结如下 实现思路 Jcrop来获取截取图片的起点XY和终点xy,另外...

Jcrop图片裁剪插件 参数说明

名称 默认值 说明 allowSelect true 允许新选框 allowMove true 允许选框移动 allowResize true 允许选框缩放 trackDocu...
  • lybwwp
  • lybwwp
  • 2013年12月13日 20:12
  • 3898

jcrop 用法小结

官方站点http://deepliquid.com/content/Jcrop.html 。下载了最新版的压缩包,压缩包中包括了Jcrop的几个demo文件,关键的Jcrop.js文件和jQuer...

使用jcrop进行头像剪切

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

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

html5+exif.js+canvas实现手机端照片上传预览、压缩、旋转功能

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。 因此解决这个问题的思路是:获取到照片拍摄的方向角...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jcrop实现裁切图片
举报原因:
原因补充:

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