jquery imgareaselect 使用利用js与程序结合实现图片剪切


Posted in Javascript onJuly 30, 2009
/* 
缺陷,当前在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下有问题,不影响使用,但是影响美观度
插件打包下载地址 https://3water.com/jiaoben/31986.html
Javascript 相关文章推荐
js判断输入是否为数字的具体实例
Aug 03 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
JavaScript门道之标准库
May 26 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
Javascript this指针
Jul 30 #Javascript
javascript 进度条 实现代码
Jul 30 #Javascript
JS input 数字验证代码
Jul 30 #Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 #Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 #Javascript
javascript EXCEL 操作类代码
Jul 30 #Javascript
JavaScript this 深入理解
Jul 30 #Javascript
You might like
PHP实现的sqlite数据库连接类
2014/12/12 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
php实现头像上传预览功能
2017/04/27 PHP
jQuery回车实现登录简单实现
2013/08/20 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
详解Python中find()方法的使用
2015/05/18 Python
python机器学习之神经网络(一)
2017/12/20 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
哪些是python中web开发框架
2020/06/17 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
经济信息管理专业大学生求职信
2013/09/27 职场文书
大学生职业生涯规划范文
2013/12/31 职场文书
党员入党表决心的话
2014/03/11 职场文书
导师推荐信范文
2014/05/09 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
Mybatis是这样防止sql注入的
2021/12/06 Java/Android