裁剪插件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# yield关键字原理
https://www.cnblogs.com/blueberryzzz/p/8678700.html c# yield关键字原理详解 1.yield实现的功能yield return:先看下面的代码 ...
- Substring Frequency (II) LightOJ - 1427 AC自动机
https://vjudge.net/problem/LightOJ-1427 把所有模式串加入ac自动机,然后search的时候暴力,每个子串都暴力一下就好. 其实AC自动机就是,先建立好trie图 ...
- bcc-tools安装
1 一. 安装cmake cmake是一种跨平台的编译工具,安装过程如下: 下载源码包:https://cmake.org/files/v3.8/cmake-3.8.0.tar.g ...
- Kudu的架构
不多说,直接上干货! Kudu的架构 1.kudu的 基本框架 Kudu 是用于存储结构化( structured )的表( Table ).表有预定义的带类型的列( Columns ),每张表有一 ...
- php高级教程
PHP - 多维数组 多维数组指的是包含一个或多个数组的数组. 注释:数组的维度指示您需要选择元素的索引数. 对于二维数组,您需要两个索引来选取元素 对于三维数组,您需要三个索引来选取元素 PHP - ...
- ajax的serialize()方法
自己看吧,超级简单,就不用挨个获取表单名称和值对装在Json里往php传了,直接传个form就可以. [HTML] <form method="post" id=" ...
- c#获取目录
获取程序目录 string s = System.IO.Directory.GetCurrentDirectory(); Console.WriteLine(s);// C:\Users\r-\doc ...
- JavaScript流程控制语句脑图
JavaScript流程控制语句脑图 图片是从网上找来的,在这记录一下,以备后面需要的时候查找方便. JavaScript通过规定的语句让有条件的按照一定的方式执行. 分为:循环语句 while do ...
- h5:WebSocket
实时 Web 应用的窘境 Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特 ...
- 【干货】Html与CSS入门学习笔记9-11
九.盒模型 与元素亲密接触 1.盒模型 css将每个元素都看做一个盒子,包括以下属性: 内容区content area:包含内容,内容可以决定大小,也可以自行设定宽度和高度.元素的width属性指定的 ...