为大家介绍个插件:jCrop。这个插件被我用在了多个项目中,如通过画热力图来查看某块地方用户的浏览数,放大缩小拖动选框来实时预览所选区域的图片病裁剪,设置头像是选框必须要是正方形,它有着丰富的配置参数和回调函数。

其常用的参数和回调方法在网上都可以找到,例如是否允许拖放,是否允许新选框,选框允许的大小、颜色、边界,禁用选框、销毁选框、重新调用选框等,使用起来非常方便。

使用方法是:

1.载入css

  <link rel="stylesheet" href="jquery.Jcrop.css">

2.载入 JavaScript 文件

  <script src="jquery.js"></script>

  <script src="jquery.Jcrop.js"></script>

3.给 IMG 标签加上 ID

  <img id="element_id" src="pic.jpg">

4.调用 Jcrop

  $('#element_id').Jcrop();

例如要想实现所选区域必须为正方形,则需要写上:

$('#element_id').Jcrop({
  aspectRadio:1
});

令长宽比为1即可满足要求。

裁剪插件jCrop的更多相关文章

  1. jQuery 图片裁剪插件 Jcrop

    Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...

  2. jQuery的图像裁剪插件Jcrop

    1.最基本使用方法     html代码部分: <img src="demo_files/flowers.gif" id="demoImage"/> ...

  3. jQuery 图像裁剪插件Jcrop

    ,    // 设置框的最大宽度          setSelect: [ 175, 100, 400, 300 ]        });                $('#text-input ...

  4. 图片裁切插件jCrop的使用心得(三)

    在这一篇里,我来具体讲讲代码该如何写. 下面是jCrop的初始化代码 //图片裁剪插件Jcrop初始化 function initJcrop() { // 图片加载完成 document.getEle ...

  5. 支持移动端裁剪图片插件Jcrop(结合WebUploader上传)

    (此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存) 最近有一个需求,微信公众号上传图片,支持自定义裁剪. 以前用过一款裁剪插件cropper,很久没用了,不知道对移动端操作兼容如何,重新从网上搜 ...

  6. 上传、裁剪图片-----Jcrop图片裁剪插件

    Jcrop文档:http://code.ciaoca.com/jquery/jcrop/C#裁剪:http://www.cnblogs.com/xyang/archive/2013/02/25/293 ...

  7. 开源JS图片裁剪插件

    开源JS图片裁剪插件 一.总结 一句话总结: 要用点赞最高的插件,这样适用性最好,效果最好,出问题的概率也最低,这里电脑端和手机端都可以用的建议用 cropper.js 二.5款好用的开源JS图片裁剪 ...

  8. cropbox.js 头像裁剪插件

    cropbox.js 一个轻量级和简单的JavaScript,Jquery,YUI插件来裁剪您的头像. 特征 支持dataUrl显示图像(函数getDataURL) 支持Blob上传图片(函数getB ...

  9. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

随机推荐

  1. Connection closing...Socket close. Connection closed by foreign host. Disconnected from remote host(centos6.9) at 14:59:05.

    查找网上资料解决方法如下 [root@localhost ssh]# service sshd start Starting sshd: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...

  2. 搭建python开发环境

    1.下载python3.6并安装 .网址:https://www.python.org/downloads/windows/ 安装完在cmd看输入“python"是否能够出现python版本 ...

  3. wait、notify和notifyAll

    生产者消费者模型是我们学习多线程知识的一个经典案例,一个典型的生产者消费者模型如下: public void produce() { synchronized (this) { while (mBuf ...

  4. 跨域的问题(jsonp和cors)

    由于浏览器的同源策略,用户想要跨域访问浏览器就会报错,那么就涉及到解决跨域的问题.最近我接触到的解决方法是两个,jsonp和cors. jsonp(json with padding)我们虽然不能直接 ...

  5. vue resource 携带cookie请求 vue cookie 跨域(六)

    1.依赖VueResource  确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.h ...

  6. HDFS读写文件流程

    读取: 写入:https://www.imooc.com/article/70527

  7. UGUI EventSystem.current.IsPointerOverGameObject(),判断是否进入了UI上

    EventSystem.current.IsPointerOverGameObject(); //返回一个布尔值,进入了UI上就返回true,用的时候要 using UnityEngine.Event ...

  8. python单元测试框架-unittest(四)之用例综合框架管理

    简述为何如要框架? 前面测试用例与执行都是写在一个文件,当用例数量不断增加的时候,用例的执行与管理变得非常麻烦,因此需要对用例根据具体的功能模块来使用单独的模块来管理.就像一所学校要根据不同年级进行分 ...

  9. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  10. 虚拟机中Centos7搭建本地仓库

    iso放入光驱(虚拟机光驱)后,设备目录是/dev/sr0 表示光驱,被挂载道 /run/media/c4t/CentOS\ 7\ x86_64目录下 [c4t@localhost ~]$ df文件系 ...