裁剪插件jCrop
为大家介绍个插件: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的更多相关文章
- jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...
- jQuery的图像裁剪插件Jcrop
1.最基本使用方法 html代码部分: <img src="demo_files/flowers.gif" id="demoImage"/> ...
- jQuery 图像裁剪插件Jcrop
, // 设置框的最大宽度 setSelect: [ 175, 100, 400, 300 ] }); $('#text-input ...
- 图片裁切插件jCrop的使用心得(三)
在这一篇里,我来具体讲讲代码该如何写. 下面是jCrop的初始化代码 //图片裁剪插件Jcrop初始化 function initJcrop() { // 图片加载完成 document.getEle ...
- 支持移动端裁剪图片插件Jcrop(结合WebUploader上传)
(此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存) 最近有一个需求,微信公众号上传图片,支持自定义裁剪. 以前用过一款裁剪插件cropper,很久没用了,不知道对移动端操作兼容如何,重新从网上搜 ...
- 上传、裁剪图片-----Jcrop图片裁剪插件
Jcrop文档:http://code.ciaoca.com/jquery/jcrop/C#裁剪:http://www.cnblogs.com/xyang/archive/2013/02/25/293 ...
- 开源JS图片裁剪插件
开源JS图片裁剪插件 一.总结 一句话总结: 要用点赞最高的插件,这样适用性最好,效果最好,出问题的概率也最低,这里电脑端和手机端都可以用的建议用 cropper.js 二.5款好用的开源JS图片裁剪 ...
- cropbox.js 头像裁剪插件
cropbox.js 一个轻量级和简单的JavaScript,Jquery,YUI插件来裁剪您的头像. 特征 支持dataUrl显示图像(函数getDataURL) 支持Blob上传图片(函数getB ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
随机推荐
- c#之GDI简单实现代码及其实例
作业:文档形式 3到5页理解 1.理解 2.源代码解释(1到2页) 3.实现效果 项目地址: https://github.com/zhiyishou/polyer Demo:https://zhiy ...
- vue-cli中webpack配置解析
版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2.2.1 目录结构 ├── README.md ├── build │ ├── build. ...
- 多线程编程_CountDownLatch
CountDownLatch是JAVA提供在java.util.concurrent包下的一个辅助类,可以把它看成是一个计数器,其内部维护着一个count计数,只不过对这个计数器的操作都是原子操作,同 ...
- Android NDK开发 Jni中打日志LOG(二)
HelloJni.c文件中,加入头文件和函数声明.最终文件如下: #include <jni.h> #include <string.h> #include<androi ...
- 小萝卜控机大师录制脚本(手机app自动化)
手机自动化测试 之前发布过小萝贝控机大师与按键精灵结合实现手机自动化测试的功能,小萝贝控机大师升级了实现了更多手机自动化测试的功能,如下: l 手机功能自动化测试:录制脚本,检查点时点击小萝贝控机大师 ...
- redis数据类型及常用命令使用
redis干啥的,一般人都知道,但很多人只知道是个缓存数据库,其它的就不知道了,本猿无能亦是如此,然知耻而后勇,我们该理一理这里边的一些逻辑,看看redis究竟是怎么一回事儿,能干啥,怎么做的,这样才 ...
- linux程序分析工具介绍(一)—-”/proc”
写在最前面:在开始本文之前,笔者认为先有必要介绍一下linux下的man,如果读者手头用linux系统,直接在终端输入man man便可以看到详细的说明,我在这里简单的总结一下,man命令是用来查看l ...
- .net 与 asp.net
.net 指的是框架,框架包含很多东西例如: > 语言: VB, C#, C++, Ruby, Python ... > 类库: 网络通讯,图像处理, 安全,IO,数据链接访问 ... & ...
- IDEA检出SVN项目
https://blog.csdn.net/qq_27093465/article/details/74898489 https://jingyan.baidu.com/article/47a29f2 ...
- Django Rest Framework框架源码流程
在详细说django-rest-framework源码流程之前,先要知道什么是RESTFUL.REST API . RESTFUL是所有Web应用都应该遵守的架构设计指导原则. REST是Repres ...