jq 图片裁剪
1.html
<div class="jcropbox" style="display: none">
<img src="" alt="" id="jcropImg" style="display: none"/>
<div class="right-img-box">
<span class="title-text">头像预览</span>
<div class="imgBigBox" style="width: 186px; height: 186px; overflow: hidden"><img src="" alt="" id="imgBig" /></div>
<span class="title-text">大头像150*150</span>
<div class="imgSmallBox" style="width: 24px; height: 24px; overflow: hidden"><img src="" alt="" id="imgSmall"/></div>
<span class="title-text">小头像24*24</span>
</div>
<div class="updateImg default-btn" id="updateImg">确定</div>
</div>
2.js
//jq引用
<script src="/third-party/jquery.Jcrop.min.js"></script> //使用
var data = {url: 'xxx.jpg'}
var updatePreview = function(c){
if (parseInt(c.w) > 0){
$('#imgSmall').css({
width: Math.round(this.small / c.w * this.boundx) + 'px',
height: Math.round(this.small/ c.h * this.boundy) + 'px',
marginLeft: '-' + Math.round(this.small / c.w * c.x) + 'px',
marginTop: '-' + Math.round(this.small/ c.h * c.y) + 'px'
});
$('#imgBig').css({
width: Math.round(this.big / c.w * this.boundx) + 'px',
height: Math.round(this.big/ c.h * this.boundy) + 'px',
marginLeft: '-' + Math.round(this.big / c.w * c.x) + 'px',
marginTop: '-' + Math.round(this.big/ c.h * c.y) + 'px'
});
}
this.x = c.x;
this.y = c.y;
this.w = c.w;
this.h = c.h;
}
$("#jcropImg").attr("src",data.url);
$("#imgBig").attr("src",data.url);
$("#imgSmall").attr("src",data.url);
$('#jcropImg').Jcrop({
aspectRatio:1, //比例
setSelect: [ 0, 0, 2000,2000], //开始默认
boxWidth:200,
boxHeight:200,
onChange: updatePreview,
onSelect: updatePreview
},function () {
var bounds = this.getBounds();
this.boundx = bounds[0];
this.boundy = bounds[1];
this.small = 24;
this.big = 186;
});
3.这种方式一般用在用户的头像处理 取大图和小图 并保存在node 的相应位置
配合方式
先上传图片:http://www.cnblogs.com/zycbloger/p/6230029.html
前端截图:http://www.cnblogs.com/zycbloger/p/6230095.html
最后node截图:http://www.cnblogs.com/zycbloger/p/6230155.html
jq 图片裁剪的更多相关文章
- node.js平台下,cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
- cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
- iOS常见用户头像的圆形图片裁剪常见的几种方法
在开发中,基本上APP的用户头像的处理都需要把用户所上传的方形图片,处理为圆形图片.在这里就总结三种常见的处理圆形图片的方法. 1.使用位图上下文 2.使用UIView的layer进行处理 3.使用r ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- 自己积累的一些Emgu CV代码(主要有图片格式转换,图片裁剪,图片翻转,图片旋转和图片平移等功能)
using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...
- web开发实战--图片裁剪和上传
前言: 最近的开发中, 有一个上传头像的任务. 由于头像本身的特殊性, 其一般流程为选择图片, 编辑裁剪区域, 再继而上传图片操作. 看似简单的东西, 实则是挺麻烦的一件事. 借助这次开发机会, 来具 ...
- PHP图片裁剪_图片缩放_PHP生成缩略图
在制作网页过程中,为了排版整齐美观,对网页中的图片处理成固定大小尺寸的图片,或是要截去图片边角中含有水印的图片,对于图片量多,每天更新大量图,靠人工PS处理是不现实的,那么有没有自动处理图片的程序了! ...
- Croppic – 免费开源的 jQuery 图片裁剪插件
Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData 对 ...
- Android大图片裁剪终极解决方案(上:原理分析)
转载声明:Ryan的博客文章欢迎您的转载,但在转载的同时,请注明文章的来源出处,不胜感激! :-) http://my.oschina.net/ryanhoo/blog/86842 约几个月前,我正 ...
随机推荐
- Light OJ 1031 - Easy Game(区间DP)
题目大意: 给你一个n,代表n个数字,现在有两个选手,选手A,B轮流有有一次机会,每个选手一次可以得到一个或者多个数字,从左侧或者右侧,但是不能同时从两边取数字,当所有的数字被取完,那么游戏结束.然后 ...
- Am命令
Am.java中: Override public void onRun() throws Exception { mAm = ActivityManagerNative.getDefault(); ...
- iOS获取经纬度
在ios8.0以上获取经纬度时,需要申请授权,否则不能定位 第一步: 在 HomeViewController.m @interfaceHomeViewController ()<CLLoc ...
- The breakpoint will not currently be hit. vs2005断点不被命中
用会了vs2005但是发现坑爹的连断点都不会命中,原来是默认设置的问题.要使断点命中: 1. 首先确保程序是在DEBUG模式下运行: 2. 确认正确的项目设置:链接器->调试->生成调试信 ...
- HTTPClient实现java自动登录人人网
参考网址: https://passport.csdn.net/account/login http://www.iteye.com/topic/638206 httpClient http://b ...
- vim 语法高亮
1 .配置文件的位置 在文件夹 /etc/ 以下.有个名为vimrc 的文件.这是系统中公共的vim配置文件.对全部用户都有效.而在每一个用户的主文件夹下,都能够自己建立私有的配置文件,命名为:&qu ...
- [Reactive Programming] Async requests and responses in RxJS
We will learn how to perform network requests to a backend using RxJS Observables. A example of basi ...
- Java Calendar实现控制台日历
public static void main(String[] args) throws IOException { //初始化日历对象 Calendar calendar = Calendar.g ...
- HTML及简单标签介绍
什么是HTML: HTML 语言是一种超文本的标记语言,简单来讲就是构建一套标记符号和语法规则,将所要显示出来的文字.图象.声音等要素按照一定的标准要求排放,形成一定的标题.段落.列表等单元. 标签 ...
- [转] Spring Boot and React hot loader
When I develop web applications, I love using React. I'm also a Spring and groovy addict. Those two ...