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高级程序设计 DOM学习笔记
Sep 10 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
jquery foreach使用示例
Sep 12 Javascript
table行随鼠标移动变色示例
May 07 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
js实现随机数字字母验证码
Jun 19 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 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语法(5)
2006/10/09 PHP
PHP5 面向对象(学习记录)
2009/12/02 PHP
php中对2个数组相加的函数
2011/06/24 PHP
php中大括号作用介绍
2012/03/22 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
python实现验证码识别功能
2018/06/07 Python
python实现复制大量文件功能
2019/08/31 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
解决python运行效率不高的问题
2020/07/20 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
介绍一下write命令
2014/08/10 面试题
写给女朋友的检讨书
2014/01/28 职场文书
销售业务员岗位职责
2014/01/29 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
python小程序之飘落的银杏
2021/04/17 Python