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 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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 Ajax乱码
2008/04/09 PHP
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
Windows下PyMongo下载及安装教程
2015/04/27 Python
python删除某个字符
2018/03/19 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
python 读取.nii格式图像实例
2020/07/01 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
应届行政管理专业个人自我评价
2013/12/28 职场文书
建筑专业自荐信范文
2014/01/05 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
一年级小学生评语
2014/04/22 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
圣诞晚会主持词
2015/07/01 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
MySQL导致索引失效的几种情况
2022/06/25 MySQL