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

最近在写项目的过程中，需要用到图像裁切上传，所以接触了插件jcrop。这个插件的裁切功能主要是获取裁切图片后的x坐标，y坐标与裁切图片的宽度和高度。该插件运行后，dom格式如下

关于该插件的源码，以及源码中的中文注释部分已发布到github 源码解析

这里说一下主要用法
首先需要引入jquery库和jcrop插件

<script type="text/javascript" src="src/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.Jcrop.js"></script>

添加dom节点

初始化jcrop

<script type="text/javascript">
$(document).ready(function(){var api = $.Jcrop("#img",{boxWidth:200,//图片的最大宽度boxHeight:200,//图片的最大高度onChange:showPreview,//选区改变时触发的事件onSelect:showPreview,aspectRatio:1//设定宽高比为1})console.log(api);//设定初始选框的大小和位置，参数为数组形式 分别为左上角的x、y 右下角的x y
api.setSelect([$("#img").width()>$("#img").height()?1/2*($("#img").width()-$("#img").height()):0,                           $("#img").width()>$("#img").height()?0:1/2*($("#img").height()-$("#img").width()),                               $("#img").width()>$("#img").height()?1/2*($("#img").width()+$("#img").height()):$("#img").height(),                                $("#img").width()>$("#img").height()?$("#img").height():1/2*($("#img").height()+$("#img").width())]);function showPreview(coords){console.log(coords);if(parseInt(coords.w)>0){var rx = $("#pre_box").width()/coords.w;var ry = $("#pre_box").height()/coords.h;$("#crop_pre").css({width:Math.round(rx*$("#img").width())+"px",height:Math.round(ry*$("#img").height())+"px",marginLeft:"-"+Math.round(rx*coords.x)+"px",marginTop:"-"+Math.round(ry*coords.y)+"px"})}}
})
</script>

当运行程序时初始化状态为

缩略图状态为

jquery插件jcrop的初步认识与用法相关推荐

Jquery插件之ajaxForm ajaxSubmit的理解用法
如今ajax满天飞,作为重点的form自然也受到照顾. 其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){$('#myF ...
php jquery validate remote,jquery插件validate里面的remote参数用法
validate验证在进行异步数据库查询验证的过程中用到了remote这个参数 remote里面有url,dataType,data,type等等这几个参数,当data不写的时候默认是当前被验证的字段 ...
jQuery之Jcrop
jQuery之Jcrop 头像裁剪是一个经常用到的功能,实现原理也较为简单,就是在本地选择好所需裁剪图片的坐标,将坐标发送到服务器,由服务器执行图片裁剪操作. jQuery插件Jcrop提供了强大的图 ...
html使用定时器timer,jquery插件jTimer jquery定时器的用法举例
本节内容: jquery插件jTimer,jQuery定时器. 需求: 按时间间隔执行一个任务,当满足一定条件时停止执行. 1,插件用法: 复制代码代码示例: (function ($) { $.e ...
jQuery插件stickup.js 源码解析初步
这里只是一个初步的解析 stickup.js是一个简单的jQuery插件,源代码只有100多行,它能让页面目标元素 "固定" 在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现 ...
1000个JQuery插件（转载）
超强1000个jquery极品插件!(转) 花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++ ...
1000个jquery插件
1.导航类 (1)Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件.二手图书二手书特价书旧书网 (2)jQuery-Horizontal ...
自己动手开发jQuery插件
因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...
jQuery插件之-selectList
基于jQuery的对select操作的插件有不少,jQuery插件selectList可以用于替换标准的HTML 多选 select 标签,它提供一个漂亮并且更加友好的界面,在IE和非IE内核浏览器上 ...

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

jquery插件jcrop的初步认识与用法相关推荐

最新文章

热门文章