jquery实现截取pc图片_jquery实现图片裁剪思路及实现
思路: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
效果如下:
JAVA实现裁剪图片
http://blog.csdn.net/renfyjava/article/details/9942743
我的例子:
我的是同时显示4个尺寸的头像,部分代码如下:
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 });
});
显示效果:
jquery实现截取pc图片_jquery实现图片裁剪思路及实现相关推荐
- jquery实现截取pc图片_Cropper.js 实现裁剪图片并上传(PC端)
由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器,所以上网查询了很多资料,也试用了许多案例,发现cropper插件裁剪是比较完善的,所以结合之前的使用情况,编写了此案例.本案例是参考 ...
- jquery实现截取pc图片_[置顶] JQuery在线截取图片
JQuery在线截取图片 ASP.NET结构开发 1.在线截取 前几天看织梦CMS,有个截图功能挺好的,可以在线选取需要截取的部分图片,然后后台截取 2.开始正文 首先构建文档,样式 JQuery截取 ...
- jquery实现截取pc图片_jquery 上传图片自由截取
为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用.本文主要是利用jQuery的imgAreaSelect插件实现. 首先引入三个文 ...
- jquery实现截取pc图片_jquery 图片截取工具jquery.imagecropper.js
除了jquery,本插件还引用了UI库,包括ui.draggable.js ImageCropper 演示需要asp.net支持.测试通过 ImageCropper 下载 https://www.jb ...
- jquery实现截取pc图片_如何优雅的对网页截取长图
苏生不惑第115 篇原创文章,将本公众号设为星标,第一时间看最新文章. 最近写文章想截个长图,才发现一直使用的QQ早有这个功能了,这里就整理几个pc上网页长截图的方案. qq滚动截图 qq截图应该很多 ...
- java 预览图片_jquery实现图片预览的方法
//jquery实现图片预览的方法实例 function viewimg(index) { var name = 'uploadimg' + index; var imgup = $(name); v ...
- [置顶] JQuery在线截取图片
JQuery在线截取图片 ASP.NET结构开发 1.在线截取 前几天看织梦CMS,有个截图功能挺好的,可以在线选取需要截取的部分图片,然后后台截取 2.开始正文 首先构建文档,样式 <html ...
- JQuery在线截取图片
JQuery在线截取图片 ASP.NET结构开发 1.在线截取 前几天看织梦CMS,有个截图功能挺好的,可以在线选取需要截取的部分图片,然后后台截取 2.开始正文 首先构建文档,样式 <html ...
- 炫酷实用的jQuery插件 涵盖菜单、按钮、图片
新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...
最新文章
- R语言临床预测模型的评价指标与验证指标实战:净重新分类指数NRI(Net Reclassification Index, NRI)
- jquery jQuery的入口函数 $函数 dom对象和jquery对象
- Android数据存储与持久化
- vuecli3 引入全局scss变量_在vue-cli 3中给stylus、sass样式传入共享的全局变量
- 使用.Net图表开发工具JDash.Net添加组件
- Linux命令之ifconfig
- NYOJ题目 263 精挑细选
- debian9.8无法切换中文输入法
- dubbo常见的一些面试题
- ubuntu ftp 服务的使用
- Excel函数-数据库函数大全(Excel Database Functions)
- 【学习笔记-时间序列预测】prophet-使用.2变化点检测、趋势灵活性调整
- 山东大学软件学院概率论与数理统计(考试)——期末考试回忆版
- Shader 优化相关资料整理
- vs 2010 sp1
- 华为机试题输入输出总结
- 迭代局部搜索算法(Iterated local search)
- unity protobuf使用repeated字段转c#文件后List只读问题
- docker命令总结
- dvm 与 jvm区别
热门文章
- row间距 table 某一行_UITableview的一个section下的各行Row之间可以设置间隔一段距离吗?...
- Matlab神经网络十讲(7): Self-Organizing and LVQ Networks
- Qt修炼手册10_QTableWidget控件使用说明及实践
- 主成分分析的数学原理
- PowerDesigner16导出Sql修复
- C++编程中的头文件包含问题
- linux下gdb调试方法和技巧详解
- 汇编语言王爽第二版-课后答案以及解析
- 分支合并 Fork-Join 框架
- leetCode-删除排序数组中的重复项