jquery实现图片裁剪思路及实现


Posted in Javascript onAugust 16, 2013

思路:JS,jquery不能实现图片的裁剪,只是显示了一个假象

我的实现的方式大体如下:
1.将用户选中的图片上传到服务器
2.将选中头像的矩形框在图片上的坐标发送到服务器,包括,矩形框的宽,高,左上角的x,y坐标,图片的高,宽等
3.在服务器上用获得的各个坐标值,以及原始图片,用JAVA进行裁剪。
-----------------------------------
jquery 裁剪效果显示,利用imgAreaSelect
http://odyniec.net/projects/imgareaselect/
http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html
效果如下:
jquery实现图片裁剪思路及实现 
JAVA实现裁剪图片
http://blog.csdn.net/renfyjava/article/details/9942743
我的例子:
我的是同时显示4个尺寸的头像,部分代码如下:

<script type="text/javascript"> 
var $thumb_width = 180; //缩略图大小 
var $thumb_height = 180; 
function preview(img, selection) { 
var scaleX = $thumb_width / selection.width; 
var scaleY = $thumb_height / selection.height; 
var scaleX2 = 100 / selection.width; 
var scaleY2 = 100 / selection.height; 
var scaleX3 = 60 / selection.width; 
var scaleY3 = 60 / selection.height; 
var scaleX4 = 30 / selection.width; 
var scaleY4 = 30 / selection.height; $('#avatar180 img').css({ 
width: Math.round(scaleX * 300) + 'px', //获取图像的实际宽度 
height: Math.round(scaleY * 300) + 'px', //获取图像的实际高度 
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
}); 
$('#avatar100 img').css({ 
width: Math.round(scaleX2 * 300) + 'px', //获取图像的实际宽度 
height: Math.round(scaleY2 * 300) + 'px', //获取图像的实际高度 
marginLeft: '-' + Math.round(scaleX2 * selection.x1) + 'px', 
marginTop: '-' + Math.round(scaleY2 * selection.y1) + 'px' 
}); 
$('#avatar60 img').css({ 
width: Math.round(scaleX3 * 300) + 'px', //获取图像的实际宽度 
height: Math.round(scaleY3 * 300) + 'px', //获取图像的实际高度 
marginLeft: '-' + Math.round(scaleX3 * selection.x1) + 'px', 
marginTop: '-' + Math.round(scaleY3 * selection.y1) + 'px' 
}); 
$('#avatar30 img').css({ 
width: Math.round(scaleX4 * 300) + 'px', //获取图像的实际宽度 
height: Math.round(scaleY4 * 300) + 'px', //获取图像的实际高度 
marginLeft: '-' + Math.round(scaleX4 * selection.x1) + 'px', 
marginTop: '-' + Math.round(scaleY4 * selection.y1) + 'px' 
}); 
$('#x1').val(selection.x1); 
$('#y1').val(selection.y1); 
$('#x2').val(selection.x2); 
$('#y2').val(selection.y2); 
$('#w').val(selection.width); 
$('#h').val(selection.height); 
} 
$(document).ready(function () { 
$('#save_thumb').click(function() { 
var x1 = $('#x1').val(); 
var y1 = $('#y1').val(); 
var x2 = $('#x2').val(); 
var y2 = $('#y2').val(); 
var w = $('#w').val(); 
var h = $('#h').val(); 
var jyduploadfile = $('#jyduploadfile').val(); 
if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h=="" || jyduploadfile==""){ 
alert("请先选择上传图片"); 
return false; 
}else{ 
return true; 
} 
}); 
}); 
$(window).load(function () { 
$('#picView').imgAreaSelect({ selectionColor: 'blue', x1:60, y1:60, x2: 240, 
maxWidth:300,minWidth:100,y2:240,minHeight:100,maxHeight:300, 
selectionOpacity: 0.2 , aspectRatio: '1:'+($thumb_height/$thumb_width)+'', onSelectChange: preview }); 
}); 
</script>

显示效果:
jquery实现图片裁剪思路及实现
Javascript 相关文章推荐
JS打开新窗口的2种方式
Apr 18 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 #Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 #Javascript
JavaScript版TAB选项卡效果实例
Aug 16 #Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 #Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 #Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 #Javascript
动态加载script文件的两种方法
Aug 15 #Javascript
You might like
php中Snoopy类用法实例
2015/06/19 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
python3.3实现乘法表示例
2014/02/07 Python
Python实现简单的代理服务器
2015/07/25 Python
python使用psutil模块获取系统状态
2016/08/27 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
如何定义TensorFlow输入节点
2020/01/23 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Python class的继承方法代码实例
2020/02/14 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
2015年党总支工作总结
2015/05/25 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
Window server中安装Redis的超详细教程
2021/11/17 Redis
Redis全局ID生成器的实现
2022/06/05 Redis