WEB开发网
开发学院网页设计JavaScript 用jquery插件的图片剪切上传功能 阅读

用jquery插件的图片剪切上传功能

 2013-10-18 17:21:51 来源:开发学院   
核心提示: 为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,用jquery插件的图片剪切上传功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用,被缩放了,那么在后台上传剪切图像的时候,主要实现的形式有两种,一种是flash截图

 为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是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);

Tags:jquery 插件 图片

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接

精彩阅读