花了一天多的时间终于搞好了,贴出来,分享一下
为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用。主要实现的形式有两种,一种是flash截图,另一种就是javascript截图,两种方法各有秋千,关于Flash截图可以参考一下UcHome程序中头像上传功能,但这不是我要讨论的话题,我这里主要是如何实现javascript截图,利用jQuery的imgAreaSelect插件,轻松实现自定义头像[avatar]javascript截图功能
首先,利用的是jquery上传剪切插件imgAreaSelect
官方下载地址:http://odyniec.net/projects/imgareaselect/
加压后里面有两个js文件
一个是jquery.min.js 另一个是 jquery.imgareaselect.js
将这两个js文件引入到项目中去
其次,在文件中要加入javascript代码
//预览显示
function preview(img, selection){
var scaleX = 100 / (selection.width || 1);
var scaleY = 100 / (selection.height || 1);
//动态小头像 获取当前选中框的宽度,高度,左边框,右边框
$('#view').css({ //view是预览图像的id
width: Math.round(scaleX * 300) + 'px',
height: Math.round(scaleY * 220) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
//加载小头像
$(document).ready(function () {
$('<div><img id="view" src="bee.jpg" style="position: relative;" /></div>')
.css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px'
})
.insertAfter('#biuuu'); //把新建元素放到 #biuuu 之后
//.insertAfter($('#biuuu')); //把新建元素放到 #biuuu 之后
});
//初始化加载
$(window).load(function () {
$('#biuuu').imgAreaSelect({
aspectRatio: '1:1', //截取比例
//show:true,
//resizable:false, //是否可调整大小
autoHide: false,//选择框选择完毕是否自己取消
key:true, //是否启用键盘,默认为false
//x1: 75, y1: 30, x2: 225, y2: 180, //需要处理的区域,原始的
//x1:左上角x轴坐标 y1:左上角y轴坐标 x2:右下角x轴坐标 y2:右下角y轴坐标
keys: { arrows: 1, ctrl: 5, shift: 'resize' }, //调整像素大小
//onInit: function(img, selection) { ias.setSelection(100, 50, 250, 150, true); ias.update(); }, //设置初始函数 画出选择框
onSelectChange: preview , //选框移动时触发的事件
onSelectEnd: getLocation //选框结束时触发的事件
});
});
上述的详细参数配置在官网上也有,自己去查阅
最后,在文件中使用
<div>
<img id="biuuu" src="bee.jpg" title="biuuu" width="320px" height="220px" style="float: left; margin-right: 10px;"/>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
说明:1.利用插件很容易做出来剪切预览效果,可是让我纠结了半天是:生成的预览图如何上传呀,在网上找了一段代码,发现只要是上传图片的大小不同,那么生成的图也不同,后来想想是缩放比例的问题。也就是说要实际图像的大小和在页面显示的大小是不一样的,被缩放了,那么在后台上传剪切图像的时候,我们必须要还原原来图像的大小,并把要剪切的部分也相应的要放大或缩小
代码:
System.Drawing.Image sourceImage = System.Drawing.Image.FromFile(Server.MapPath("bee.jpg"));
int height = Convert.ToInt32(sourceImage.Height);//获取原始图像的高
int width = Convert.ToInt32(sourceImage.Width);//获取原始图像的宽度
x1 = x1*(width/320);//根据实际尺寸缩放
x2 = x2*(width/320);
y1 = y1*(height/240);
y2 = y2*(height/240);
未解决动态头像的功能,这是插件本身的问题
分享到:
相关推荐
上次我们介绍过一款基于HTML5的图片马赛克效果,今天我们要来介绍一款基于jQuery的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的...
前端利用jquery插件上传图片,样式已经优化,可以调整上传位置,可以删除
借用jquery库异步上传的插件,可以支持批量上传,代码简单,用起来方便
jQuery支持拖拽图片上传的图片批量上传插件
jquery 上传插件jquery 上传插件jquery 上传插件jquery 上传插件jquery 上传插件jquery 上传插件jquery 上传插件jquery 上传插件jquery 上传插件jquery 上传插件jquery 上传插件jquery 上传插件jquery 上传插件...
资源名:jQuery图片批量上传插件源码 资源类型:程序源代码 源码说明:实现图片预览,预览图片移除,任意张数异步上传,上传进度条指示,已选中且上传的图片不会重复上传,且不能移除 使用方法 界面顶部引入IMGUP....
Picture cut 是一个 jQuery 插件,通过友好的方式实现漂亮的图像上传、浏览和剪切操作。 特性: Ajax 上传 图像大小调整 拖放图片实现上传 图像尺寸处理 图像裁剪 支持浏览器: Google Chrome Mozilla ...
jquery实现图片即时上传,兼容多种浏览器,实现功能强大,代码简单,值得分析学习。
jquery复制内容到剪切板的插件zclip,里面包含jquery.zclip.min.js,ZeroClipboard.swf及教程。一定要在服务器环境下运行才可以,单网页模式不行。
jQuery php图片上传预览插件_头像上传预览代码
最强图片上传示例 可多次多选择可删除可预览 jQuery+Ashx 异步上传 史上最强图片上传示例。...项目开发中整理后分享出来,预览功能参考了“jQuery带删除功能多图片上传预览插件”。 整理及上传时间 2018.10.24
jQuery多张图片批量上传插件_多个文件批量上传插件代码
jQuery支持预览多个文件_多张图片批量上传插件jQuery支持预览多个文件_多张图片批量上传插件jQuery支持预览多个文件_多张图片批量上传插件
jquery+php+ajax图片上传并剪切
jquery图片展示插件 jquery图片弹出框插件 jquery图片排序过滤 jquery图片放大 jquery图片滑动效果 jquery城市二级联动 jquery多值输入插件 jquery多级菜单导航 jquery大转盘game jquery实现网易邮箱首页插件 jquery...
jQuery PHP头像图片上传预览插件
可以在线剪切图片并保存的JQUERY插件,可以自己更换样式
jQuery实现的对上传图片进行裁剪插件,可以对上传的图片进行预处理,上传符合要求的图片大小
jquery 上传 插件 upload jquery上传插件upload jquery 上传 插件 upload jquery上传插件upload jquery 上传 插件 upload jquery上传插件upload jquery 上传 插件 upload jquery上传插件upload jquery 上传 插件 ...