首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 软件管理 > 软件开发 >

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

2013-09-12 
利用jquery插件的图片剪切上传功能? ?.css({?? ?float: left,?? ?position: relative,?? ?overflow:

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

? ?.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);

?

?

未解决动态头像的功能,这是插件本身的问题

热点排行