为大家介绍个插件: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. sscanf()分割字符数组

    sscanf与scanf类似,都是用于输入的,只是后者以键盘(stdin)为输入源,前者以固定字符串为输入源. 头文件: #include<stdio.h> 或者 #include < ...

  2. Java学习笔记day08_day09_对象实例化_private_this

    1.类与对象 类就是一个模版. 对象的实例化就是根据模版类, 使用new关键字创建实际的对象. 2.类的定义及创建对象 类的定义格式: public class 类名{ //属性(变量) 数据类型 变 ...

  3. 转Linux 下用alias 设置命令别名快速切换常用命令

    https://blog.csdn.net/u012830148/article/details/80618616 在linux下开发,经常需要切换目录,如果目录很长则切换起来非常的麻烦,针对一些常用 ...

  4. python3 pip使用报错

     在windodws上pip3使用了很长时间,今天突然报错. Fatal error in launcher: Unable to create process using '"' 解决方案 ...

  5. ckeditor(在线文本编辑器)使用教程

    ckeditor是一款由javascript编写的富文本网页编辑器,它可以填写文字.插入图片.视频.Excel等富媒体信息,也可以在源码方式下填写内容,在各个网站中应用非常广泛. 下面就来说说cked ...

  6. Linux添加、创建新用户

    给Linux添加新用户,新建用户,新建帐号 添加用户组 sudo groupadd groupname 添加用户 sudo useradd username -m -s /bin/bash -d /h ...

  7. Django-5.1 模型层 单表操作

    7.1 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开 ...

  8. CAD安装失败怎样卸载CAD 2017?错误提示某些产品无法安装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  9. [转]JavaScriptSerializer中日期序列化

    本文转自:http://www.cnblogs.com/songxingzhu/p/3816309.html 直接进入主题: class Student { public int age { get; ...

  10. HUD 5593——ZYB's Tree——————【树形dp】

    ZYB's Tree Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Tota ...