使用jcrop实现裁切图片

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>

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

实现的过程如下：

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

前端代码如下

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实现裁切图片相关推荐

javacript 裁切图片
前言略 javacript 裁切图片 cropper(demo) Jcrop(demo) cropper Jcrop
C#开发：不规则裁切图片
C#使用GDI+可以创建,修改图片,创建图片的bitmap,使用Graphics在图片上勾画元素,点.线.面等. 规则的图片裁切,设置图片的方形或者圆形的方式,就能直接进行图片的裁切.裁切使用jpg保 ...
php imagick 图片裁切,php Imagick , 怎么使用Imagick裁切图片
php Imagick 求助, 如何使用Imagick裁切图片我需要景某个PDF文档中的某一页裁切其中一部分, 生成一新的png格式的文档. gd不支持PDF格式, Imagick 支持打开pdf ...
Python 基于透明元素裁切图片（类似Photoshop）
文章目录问题描述解决方案参考文献本文测试图像及其代码下载问题描述实现类似Photoshop的基于透明元素裁切图片 1.png 2.jpg 3.png 4.png 5.png 6.png 解 ...
Node 裁切图片的方法
1.安装 jimp $ npm install --save jimp 2.读取本地图片切图 jimp.read('本地图片地址', function (err, im ...
Rasterino 2.3.0版for AI 2020 (Illustrator裁切图片一键PS修图插件)
转载自亿品元素原文链接:http://www.epinv.com/post/8147.html Rasterino v2.3.0 64bit版(支持AI 2020).Rasterino是一款非常实用 ...
小米7.0 android 图片裁剪失败,Android 7.0适配 -- FileProvider 拍照、选择相册、裁切图片, 小米机型适配...
需求: 最近把APP的TargetSdk从21提高至25后,测试时, 在Android7.0以上的系统上,爆出了一些异常. 在个别小米等机型也存在一些异常. 问题分析: FileUriExposedE ...
怎么用懒设计工具在线裁切图片?
当我们拍摄一张图片后,可能会因为各种各样的原因需要对图片进行裁切,在裁切时要保证图片的原有的色彩饱和度,同时还要按照制定尺寸大小进行裁切,目前可用于裁切图片的工具是比较多的了,懒设计就是一款可以在线裁 ...
Vue + ccropper.js裁切图片（vue-cropper）
有什么问题可以加我的微信,有问必答. 致力于技术分享按原比例裁切图片,不失真安装: cnpm install vue-cropper 使用: import VueCropper from 'vue ...

使用jcrop实现裁切图片

使用jcrop实现裁切图片相关推荐

最新文章

热门文章