- 浏览: 754107 次
- 性别:
- 来自: 郑州
文章分类
- 全部博客 (396)
- JAVA (50)
- ORACLE (22)
- HIBERNATE (1)
- SPRING (26)
- STRUTS (4)
- OTHERS (0)
- MYSQL (11)
- Struts2 (16)
- JS (33)
- Tomcat (6)
- DWR (1)
- JQuery (26)
- JBoss (0)
- SQL SERVER (0)
- XML (10)
- 生活 (3)
- JSP (11)
- CSS (5)
- word (1)
- MyEclipse (7)
- JSTL (1)
- JEECMS (2)
- Freemarker (8)
- 页面特效 (1)
- EXT (2)
- Web前端 js库 (2)
- JSON http://www.json.org (3)
- 代码收集 (1)
- 电脑常识 (6)
- MD5加密 (0)
- Axis (0)
- Grails (1)
- 浏览器 (1)
- js调试工具 (1)
- WEB前端 (5)
- JDBC (2)
- PowerDesigner (1)
- OperaMasks (1)
- CMS (1)
- Java开源大全 (2)
- 分页 (28)
- Eclipse插件 (1)
- Proxool (1)
- Jad (1)
- Java反编译 (2)
- 报表 (6)
- JSON (14)
- FCKeditor (9)
- SVN (1)
- ACCESS (1)
- 正则表达式 (3)
- 数据库 (1)
- Flex (3)
- pinyin4j (2)
- IBATIS (3)
- probe (1)
- JSP & Servlet (1)
- 飞信 (0)
- AjaxSwing (0)
- AjaxSwing (0)
- Grid相关 (1)
- HTML (5)
- Guice (4)
- Warp framework (1)
- warp-persist (1)
- 服务器推送 (3)
- eclipse (1)
- JForum (5)
- 工具 (1)
- Python (1)
- Ruby (1)
- SVG (3)
- Joda-Time日期时间工具 (1)
- JDK (3)
- Pushlet (2)
- JSP & Servlet & FTP (1)
- FTP (6)
- 时间与效率 (4)
- 二维码 (1)
- 条码/二维码 (1)
最新评论
-
ctrlc:
你这是从web服务器上传到FTP服务器上的吧,能从用户电脑上上 ...
jsp 往 FTP 上传文件问题 -
annybz:
说的好抽象 为什么代码都有两遍。这个感觉没有第一篇 和第二篇 ...
Spring源代码解析(三):Spring JDBC -
annybz:
...
Spring源代码解析(一):IOC容器 -
jie_20:
你确定你有这样配置做过测试? 请不要转载一些自己没有测试的文档 ...
Spring2.0集成iReport报表技术概述 -
asd51731:
大哥,limit传-1时出错啊,怎么修改啊?
mysql limit 使用方法
/* 缺陷,当前在ff3下,用jquery的 width()与height()函数,在不设置图片的宽度与高度的时候,不能取到 需要在图片load函数里面初始化才可以 */ sanshi_imgareaselect = function(pic_id,view_div_id){ this.pic_obj = jQuery("#"+pic_id); this.pic_width; this.pic_height; this.view_div_id = view_div_id; this.view_width = 100; this.view_height = 100; this.view_img_id = view_div_id+"_sanshi_img"; this.ias; } //建立预览图片 sanshi_imgareaselect.prototype.make_view_pic =function(){ var img_obj = jQuery(document.createElement("IMG")); img_obj.attr("src",this.pic_obj.attr("src")); img_obj.attr("id",this.view_img_id); img_obj.attr("width",this.view_width); img_obj.attr("height",this.view_height); return img_obj; } //初始化函数 sanshi_imgareaselect.prototype.init=function(){ this.pic_width = this.pic_obj.attr("width"); this.pic_height = this.pic_obj.attr("height"); //alert(this.pic_width+":"+this.pic_height); //添加图片 jQuery("#"+this.view_div_id).append(this.make_view_pic()); //设置预览加载层样式 jQuery("#"+this.view_div_id).css({'width':this.view_width,'height':this.view_height,'overflow':'hidden'}); //构造选择区域完成的函数 var fun_str="if ( selection.width && selection.height){ var scaleX = "+this.view_width+" / selection.width;var scaleY = "+this.view_height+" / selection.height;jQuery('#"+this.view_img_id+"').css({width: Math.round(scaleX * "+this.pic_width+"),height: Math.round(scaleY * "+this.pic_height+"),marginLeft: -Math.round(scaleX * selection.x1),marginTop: -Math.round(scaleY * selection.y1)});}"; //alert(fun_str); //初始化imgAreaSelect 函数 var ias = this.pic_obj.imgAreaSelect({ //设置选择框的比列 //aspectRatio:"1:1", //设置框的添加效果 fadeSpeed:200, //选择框选择完毕是否自己取消 autoHide:false, //是否显示图片遮罩层 show:true, //是否采用api instance: true, //设置初始函数 画出选择框 onInit:function(img, selection){ias.setSelection(100, 50, 250, 150, true);ias.update();}, //设置选择完毕的函数,采用了动态执行 onSelectEnd:function(img, selection){eval(fun_str);} }); //赋值给全局 this.ias = ias; } //保存事件 采用的是get方式提交 sanshi_imgareaselect.prototype.save_pic=function(post_page,post_param){ var opt = this.ias.getSelection(true); var post_arr = new Array(); jQuery.each(post_param,function(i,n){ var temp_str =i+"="; temp_str += opt[n] ? opt[n] : n; post_arr.push(temp_str); }); //判断,是否有参数 post_page += post_page.lastIndexOf("?")<0 ? "?" : "&"; //拼装get方式的url post_url = post_page+post_arr.join("&"); alert(post_url); }
这个是封装后js代码
下面看看这段代码如何使用
$(document).ready(function () { //声明函数 var sanshi_img = new sanshi_imgareaselect("mypic","preview"); //确保图片加载完成执行初始化函数,这样避免上面的提到的bug,否则不能保证兼容性 $("#mypic").load(function(){sanshi_img.init();}); //监听保存事件 $("#save_pic").click(function(){ sanshi_img.save_pic('1.php?n=6',{"id":5,"px1":"x1","py1":"y1",'px2':"x2","py2":"y2",'pwidth':"width",'pheight':"height"}); }); })
下面看下html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="css/imgareaselect-animated.css" href="css/imgareaselect-animated.css" /> <script type="text/javascript" src="jquery-1.3.2.min.js" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js" src="scripts/jquery.imgareaselect.pack.js"></script> </head> <body> <div id="s"> <img id="mypic" name="mypic" dt="sanshi" src="scott-h-biram.jpg" src="scott-h-biram.jpg" title="mypic"/> </div> <div id="preview"></div> <div><input type="button" id="save_pic" value="保存"></div> </body> </html>
这里面的html的头式不能丢的,如果丢了,会在ie7下有问题,不影响使用,但是影响美观度
from:http://www.codesky.net/article/doc/201004/20100417042644.htm
发表评论
-
jquery.corner插件的图片角处理
2012-03-08 15:48 1061http://www.malsup.com/jquery/co ... -
jQuery删除元素remove
2012-01-06 14:55 0写道 在DOM操作页面时,删除元素的方法jquery提供了两 ... -
解决jQuery中dbclick事件触发两次click事件
2012-01-06 14:09 0在jQuery事件绑定中,dbclick可以触发两次click ... -
模拟超链接单击事件
2012-01-06 14:06 1307js脚本 function aClick(){ ... -
jQuery-Draggable参数介绍
2012-01-06 11:02 1528默认设置值: $.extend($.ui.draggable ... -
jquery.ui.draggable中文文档
2012-01-06 11:02 2101[原文翻译] JQuery UI Draggable插件用来 ... -
jQuery EasyUI 可拖放(Draggable)用法
2012-01-06 11:01 1799jQuery EasyUI可以方便实现很多功能,这里将会介绍一 ... -
JQuery获得绝对,相对位置的坐标方法
2012-01-06 10:57 879获取页面某一元素的绝对X,Y坐标,可以用offset()方 ... -
jquery的table操作之在指定行后添加新行
2011-12-30 16:02 3069<!DOCTYPE HTML PUBLIC " ... -
Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID
2011-11-25 17:58 3240query取得iframe中元素的几种方法 在if ... -
25个超棒的jQuery日历和日期选取插件
2011-06-08 18:23 3200本文介绍25个非常不错的jQuery日历和日期选取插件, ... -
30个最佳 jQuery Lightbox 效果插件
2011-06-08 18:19 2151Lightbox 应该是最流行的图片浏览效果了,常具有功 ... -
60款很酷的 jQuery 幻灯片演示和下载
2011-06-08 18:17 1170jQuery 是一个非常优秀的 JavaScript 框 ... -
10款新鲜出炉的 jQuery 插件
2011-06-08 18:14 1187这篇文章与大家分享的是10款新鲜出炉的基于 jQuery ... -
jquery UI: 推荐8个独特应用的JQuery拖放插件Table Drag plugin
2011-04-28 19:21 1853推荐8个独特应用的JQuery拖放插件 ... -
jquery1.4后 jqDrag 拖动 不可用
2011-04-06 14:28 843复制代码 代码如下: (function($){ $.f ... -
解决flexgrid的属性showToggleBtn为false,时的bug
2011-03-29 17:42 1402采用flexgrid插件时,当属性showToggleBtn为 ... -
jqmodal遮罩层的实现
2011-03-29 15:24 1985前些天公司的项目中,为了一些特效,要用到遮罩效果。了解了一下, ... -
240多个jQuery插件
2011-02-14 09:12 1037网上看到的一些jQuery插件,一共有240个,记录下来, ... -
JQuery 技术以及相关插件网址
2011-02-12 14:08 1048官网: 技术资料: jQue ...
相关推荐
在本示例中,我们将探讨如何结合JQuery ImgAreaSelect插件,实现在ASP.NET环境中上传图片并进行在线剪裁的功能。 JQuery ImgAreaSelect是一个jQuery插件,它提供了在网页上选择图像区域的能力。这个功能对于用户...
同时,如果需要更复杂的图片处理功能,可以考虑与其他图像处理库如Fabric.js或Pillow结合使用。 总结,jQuery的imgAreaSelect插件是实现网页图片裁剪功能的强大工具,其简单易用的API和丰富的定制选项使得开发者能...
jQuery作为一款强大的JavaScript库,提供了丰富的插件来扩展其功能,其中包括imgAreaSelect插件,它能帮助开发者轻松实现图片裁剪功能。本篇文章将详细探讨如何利用jQuery的imgAreaSelect插件来实现这一功能。 首先...
使用jQuery选择器选择需要添加图像选取功能的图片元素,然后调用`.imgAreaSelect()`方法进行初始化。初始化时可以传递一个配置对象,以自定义选区的样式和行为。例如: ```javascript $("#image").imgAreaSelect...
`jQuery插件imgAreaSelect`提供了一种简单而有效的图片裁剪解决方案,通过它可以轻松地实现用户交互式的图片选取功能。无论是在个人项目还是商业应用中,它都能满足你对图片裁剪的需求,尤其适用于头像裁剪、图片...
jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图
《jQuery图片裁剪插件imgareaselect详解与实践》 在现代网页设计中,用户交互体验愈发重要,其中图片裁剪功能常用于头像编辑、图片上传预览等场景。jQuery图片裁剪插件imgareaselect便应运而生,它提供了简单易用的...
除了基本的裁剪功能,imgAreaSelect还可以与其他jQuery插件结合使用,比如与表单插件配合,实现用户选择图片区域后立即提交裁剪数据。此外,还可以通过获取选区坐标,配合canvas或者HTML5的File API进行图片裁剪处理...
`imgAreaSelect`可以与各种前端框架(如Bootstrap、Vue、React等)或图片处理库(如Cropper.js)结合使用,以实现更复杂的功能。 7. **常见问题与解决方案** - **兼容性问题**:确保目标浏览器支持jQuery,以及`...
jquery.imgareaselect-0.8.min.js
本文将详细介绍如何结合imgareaselect插件与后端技术,实现图片上传及裁剪功能,以兼容包括IE在内的各种浏览器。 首先,imgareaselect插件提供了丰富的样式和交互选项,使得用户能够方便地在前端选定图片的裁剪区域...
`jQuery_imgareaselect` 是一个用于图片裁剪的JavaScript插件,它允许用户通过鼠标在图片上选择一个矩形区域,然后可以基于这个选择进行裁剪操作。这个插件适用于网页开发,尤其是在需要用户上传图片并进行预览裁剪...
总结来说,`jquery.imgareaselect`是Web开发中一个强大且易用的图像裁剪解决方案,它通过与jQuery的无缝集成,为开发者提供了一种高效、灵活的方式来实现图像上传和裁剪功能。其强大的功能和广泛的自定义选项,使其...
【基于jQuery网页截图插件(imgareaselect)】是一个用于网页截取图像选定区域的JavaScript库,它与jQuery框架紧密集成,为用户提供了一个简单易用的交互式选择工具。这个插件允许用户在网页上自由划定一个矩形区域...
`imgareaselect.js` 是一个强大且易于使用的图片选区插件,通过上述步骤和配置选项,你可以轻松地实现图片截取功能。在实际应用中,你可以根据项目需求进行调整和扩展,以满足各种复杂的场景。希望这篇教程对你在...
在本文中,我们将深入探讨如何使用jQuery、PHP和Ajax实现图片上传及剪切功能。这个技术组合常用于创建用户友好的、动态的Web应用程序,让用户能够方便地上传和编辑图片。 首先,`jQuery`是一个流行的JavaScript库,...
jQuery插件ImgAreaSelect是一个能够为图片添加可拖拽的裁剪框的插件,适合于在网页上实现图片上传预览和裁剪功能。为了实现头像上传、预览以及裁剪功能,我们需要遵循以下步骤: 首先,要明确目标功能: 1. 图片...
将这两个插件结合使用,我们可以实现一个完整的图片裁剪与上传流程:首先,用户在网页上使用`imgareaselect.js` 选择图片的裁剪区域;然后,通过`ajaxfileupload.js` 将原始图片和选区信息一起上传到服务器;最后,...