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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
node.js超时timeout详解
Nov 26 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
iScroll.js 使用方法参考
May 16 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 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
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
JavaScript中实现块作用域的方法
2010/04/01 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
js对象的比较
2011/02/26 Javascript
javascript闭包的理解
2015/04/01 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
python基础教程之面向对象的一些概念
2014/08/29 Python
Python 元类实例解析
2018/04/04 Python
python查看模块,对象的函数方法
2018/10/16 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
python缩进长度是否统一
2020/08/02 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
优秀员工评语
2014/02/10 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
先进个人评语大全
2015/01/04 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python