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 相关文章推荐
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
js操作iframe父子窗体示例
May 22 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
EsLint入门学习教程
Feb 17 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 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函数指定默认值方法的小例子
2013/12/04 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
Python中实现三目运算的方法
2015/06/21 Python
python如何在循环引用中管理内存
2018/03/20 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
详解爬虫被封的问题
2019/04/23 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
python实现单链表的方法示例
2019/09/03 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
电厂职工自我鉴定
2014/02/20 职场文书
导师工作推荐信范文
2014/05/17 职场文书
大学生个人学习总结
2015/02/15 职场文书
朋友聚会开场白
2015/06/01 职场文书
党小组考察意见
2015/06/02 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
员工升职自我评价
2019/03/26 职场文书