jQuery图片剪裁插件 Jcrop

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/tianyaxiang/article/details/84970054

Jcrop是一个jQuery插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能。

特点:

  • 对所有图片均unobtrusively(无侵入的,保持DOM简洁)
  • 支持宽高比例锁定
  • 支持 minSize / maxSize设置
  • 支持改变选区或移 动选区时的回调(Callback)
  • 支持用键盘微调选 区
  • 通过API创建互 动,比如动画效果
  • 支持CSS样式

入门
下载当前版本 
•放到页面相应的位置
•同时也需要加载jquery

加载顺序
•jQuery.js
•Jcrop.js
•Jcrop CSS样式
如:
<script src="js/jquery.pack.js"></script>
<script src="js/jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
注意:你也可以调整成其他的位置

调用 
假如:<img src="flowers.jpg" id="cropbox" />
编写以下脚本
<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop();
});
</script>
Jcrop就可以激活了

事件处理
Jcrop有2个主要的事件处理程序 onChange 和 onSelect.
onSelect callback 选择完成后调用 
onChange callback 选框移动(或者说改变)时调用
定义一个事件出来函数
<script language="Javascript">
function showCoords(c)
{
// variables can be accessed here as
// c.x, c.y, c.x2, c.y2, c.w, c.h
};
</script>
然后附加上去
<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop({
onSelect: showCoords,
onChange: showCoords
});
});
</script>
这是一个标准的jquery语法,注意最好一个属性后面没有逗号

设置选项
参数名称 类型 描述 默认 
aspectRatio decimal 设定宽高比 n/a 
minSize array [ w, h ] 设置最小尺寸 n/a 
maxSize array [ w, h ] 设置最大尺寸 n/a 
setSelect array [ x, y, x2, y2 ] 设置一个初选框的位置 n/a 
bgColor color value 设置背景容器颜色 'black' 
bgOpacity decimal 0 - 1 设置当图像被裁剪选框外的透明度 .6
如:

<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop({
onSelect: showCoords,
bgColor: 'black',
bgOpacity: .4,
setSelect: [ 100, 100, 50, 50 ],
aspectRatio: 16 / 9
});
});
</script>

 

 


  欢迎扫描此二维码关注web馆公众号
  作者:web馆
  出处:http://www.cnblogs.com/xiaoyao2011/
  欢迎任何形式的转载,但请务必注明出处。


展开阅读全文
博主设置当前文章不允许评论。

图片剪裁

09-16

[code=C#] /// rn /// 图像缩略图保存rn /// rn /// 上传路径rn /// 保存路径rn /// 所绘制图像的左上角的 x 坐标rn /// 所绘制图像的左上角的 y 坐标rn /// 截图的宽rn /// 截图的高rn /// 是否保存原图rn /// rn public bool SaveImg(string UploadPath,string SavePath,int FromWidth,int FromHeight, int width,int height,bool SaveFrom)rn rnrn System.Drawing.Image originalImage = System.Drawing.Image.FromFile(UploadPath);rn //新建一个bmp图片rn System.Drawing.Image bitmap = new System.Drawing.Bitmap(width, height);rn //新建一个画板rn Graphics g = System.Drawing.Graphics.FromImage(bitmap);rnrn //设置高质量插值法rn g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;rnrn //设置高质量,低速度呈现平滑程度rn g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;rnrn //清空画布并以透明背景色填充rn g.Clear(Color.Transparent);rnrn //在指定位置并且按指定大小绘制原图片的指定部分rn g.DrawImage(originalImage,-1* FromWidth,-1* FromHeight,originalImage.Width, originalImage.Height);rnrn tryrn rn //以jpg格式保存缩略图rn bitmap.Save(SavePath+"s.jpg", System.Drawing.Imaging.ImageFormat.Jpeg);rn if (SaveFrom)rn rn originalImage.Save(SavePath+"l.jpg", System.Drawing.Imaging.ImageFormat.Jpeg);rn rn rn catch (System.Exception e)rn rn throw e;rn return false;rn rn finallyrn rn originalImage.Dispose();rn bitmap.Dispose();rn g.Dispose();rn rn return true;rn rnrn[/code]rnrn现在调用rn SaveImg(Upload.PostedFile.FileName, Server.MapPath("~/Upload/"), 100, 100, 400, 400, false);rnrnasp.net坐标轴是怎么规定的?rn我这样写是对的rn g.DrawImage(originalImage,-1* FromWidth,-1* FromHeight,originalImage.Width, originalImage.Height);rn这样写就不对了rng.DrawImage(originalImage,FromWidth,FromHeight,originalImage.Width, originalImage.Height);rnrn 论坛

jcrop插件上传图片裁剪的问题

01-16

下面是我的html页面代码rn头部引用的文件:rn rn rn rn rn rnrn这段代码是上传文件主要标签代码:rn[code=html] rn rn rn rn 请选择需要上传的图片rn rn rn rn 注:图片格式需为.jpg或.png,其它格式无效(不支持中文命名),且图片大小不超过1MB。rn rn [/code]rn选择文件效果图:rn[img=https://img-bbs.csdn.net/upload/201501/15/1421318911_366529.png][/img]rnrn下面的代码是我的弹出框htmlrn[code=html] rn rn rn rn rn 截取图片rn rn rn rn rn rn rn rn rn rn rn rn 取消rn rn rn rn [/code]rnrn弹出层示意图:[img=https://img-bbs.csdn.net/upload/201501/16/1421378810_566063.png][/img]rnrn裁切图片我用到了jcrop这个插件,选择图片后用js处理,获得本地图片的url地址,传给弹出层的img标签内的src属性,基本上思路是这样的,弹出层内的两个取消按钮和关闭按钮给了一个点击事件,点击事件触发时,弹出层的display=“none”。rnrn下面就是我主要的js代码:rnrn[code=javascript]rnfunction bytesToSize(bytes) rn var sizes = ['Bytes', 'KB', 'MB'];rn if (bytes == 0) return 'n/a';rn var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));rn return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];rn;rn// check for selected crop regionrnfunction checkForm() rn if (parseInt($('#w').val())) rn return true;rn elsern $('.error').html('请选择一个裁剪的区域!').show();rn return false;rn rn;rnrn// update info by cropping (onChange and onSelect events handler)rnfunction updateInfo(e) rn $('#x1').val(e.x);rn $('#y1').val(e.y);rn $('#x2').val(e.x2);rn $('#y2').val(e.y2);rn $('#w').val(e.w);rn $('#h').val(e.h);rn;rnrn// clear info by cropping (onRelease event handler)rnfunction clearInfo() rn $('#w').val('');rn $('#h').val('');rn;rnrnfunction fileSelectHandler() rnrn // get selected filern var oFile = $('#image_file')[0].files[0];rnrn // hide all errorsrn $('.error').hide();rnrn // check for image type (jpg and png are allowed)rn var rFilter = /^(image\/jpeg|image\/png)$/i;rn if (! rFilter.test(oFile.type)) rn $('.error').html('图片格式不符合要求,请重新选择!').show(); rn return;rn rn var fsize=oFile.size ; //文件大小(bit)rn fsize=fsize/1024;//计算当前上传文件的大小rn // check for file sizern if (fsize>1024) rn $('.error').html('上传的图片大小大于1MB,请重新选择!').show(); rn return;rn rnrn // preview elementrn var oImage = document.getElementById('preview');rnrn // prepare HTML5 FileReaderrn var oReader = new FileReader(); rn oReader.onload = function(e) rn // e.target.result contains the DataURL which we can use as a source of the imagern oImage.src = e.target.result; rn// alert( oImage.src);rn oImage.onload = function () // onload event handlerrnrn // display step 2rn $('#uploadimg-control,#popUp-box-mask').fadeIn(500);rnrn // Create variables (in this scope) to hold the Jcrop API and image sizern var jcrop_api, boundx, boundy;rnrn // destroy Jcrop if it is existedrn if (typeof jcrop_api != 'undefined') rn jcrop_api.destroy();rnrn // initialize Jcroprn $('#preview').Jcrop(rn minSize: [32, 32], // min crop sizern aspectRatio : 1, // keep aspect ratio 1:1rn bgFade: true, // use fade effectrn bgOpacity: .3, // fade opacityrn onChange: updateInfo,rn onSelect: updateInfo,rn onRelease: clearInforn , function()rnrn // use the Jcrop API to get the real image sizern var bounds = this.getBounds();rn boundx = bounds[0];rn boundy = bounds[1];rnrn // Store the Jcrop API in the jcrop_api variablern jcrop_api = this;rn );rn ;rn ;rn // read selected file as DataURLrn oReader.readAsDataURL(oFile);rnrn$("#close,#resetBtn").bind("click",function()rn //alert("wwwee");rn $("#popUp-box-mask,#uploadimg-control").css("display","none"); rn $("#preview").attr("src",' ');rn $('#w').val('');rn $('#h').val('');rn $('#x1').val("");rn $('#x2').val("");rn $('#y1').val("");rn $('#y2').val("");rn);rn[/code]rnrn我现在遇到的问题是选择图片之后,点击取消,重新选择另一张图片,但是img标签显示的还是上一张选择的图片,经过排除,发现是jcrop插件的问题,但是我找不到问题出在哪里,哪位大神知道我错在哪了,求指导!!![img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/35.gif][/img]rnrn 论坛

没有更多推荐了,返回首页