`
huibin
  • 浏览: 755132 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

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

阅读更多

 

 

/* 
缺陷,当前在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

分享到:
评论

相关推荐

    ASP.NET JQuery ImgAreaSelect 实现上传图片在线剪裁

    在本示例中,我们将探讨如何结合JQuery ImgAreaSelect插件,实现在ASP.NET环境中上传图片并进行在线剪裁的功能。 JQuery ImgAreaSelect是一个jQuery插件,它提供了在网页上选择图像区域的能力。这个功能对于用户...

    jquery的imgareaselect截图插件

    同时,如果需要更复杂的图片处理功能,可以考虑与其他图像处理库如Fabric.js或Pillow结合使用。 总结,jQuery的imgAreaSelect插件是实现网页图片裁剪功能的强大工具,其简单易用的API和丰富的定制选项使得开发者能...

    利用jquery的imgAreaSelect插件实现图片裁剪示例

    jQuery作为一款强大的JavaScript库,提供了丰富的插件来扩展其功能,其中包括imgAreaSelect插件,它能帮助开发者轻松实现图片裁剪功能。本篇文章将详细探讨如何利用jQuery的imgAreaSelect插件来实现这一功能。 首先...

    jquery.imgareaselect-0.9.2几种封装

    使用jQuery选择器选择需要添加图像选取功能的图片元素,然后调用`.imgAreaSelect()`方法进行初始化。初始化时可以传递一个配置对象,以自定义选区的样式和行为。例如: ```javascript $("#image").imgAreaSelect...

    jQuery插件imgAreaSelect 实例代码

    `jQuery插件imgAreaSelect`提供了一种简单而有效的图片裁剪解决方案,通过它可以轻松地实现用户交互式的图片选取功能。无论是在个人项目还是商业应用中,它都能满足你对图片裁剪的需求,尤其适用于头像裁剪、图片...

    jquery imgareaselect截图

    jquery 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进行图片裁剪处理...

    JQuery插件imgAreaSelect_Demo

    `imgAreaSelect`可以与各种前端框架(如Bootstrap、Vue、React等)或图片处理库(如Cropper.js)结合使用,以实现更复杂的功能。 7. **常见问题与解决方案** - **兼容性问题**:确保目标浏览器支持jQuery,以及`...

    jquery.imgareaselect-0.8.min.js

    jquery.imgareaselect-0.8.min.js

    利用imgareaselect辅助后台实现图片上传裁剪

    本文将详细介绍如何结合imgareaselect插件与后端技术,实现图片上传及裁剪功能,以兼容包括IE在内的各种浏览器。 首先,imgareaselect插件提供了丰富的样式和交互选项,使得用户能够方便地在前端选定图片的裁剪区域...

    jquery_imgareaselect图片裁切插件使用的中文文档

    `jQuery_imgareaselect` 是一个用于图片裁剪的JavaScript插件,它允许用户通过鼠标在图片上选择一个矩形区域,然后可以基于这个选择进行裁剪操作。这个插件适用于网页开发,尤其是在需要用户上传图片并进行预览裁剪...

    jquery.imgareaselect

    总结来说,`jquery.imgareaselect`是Web开发中一个强大且易用的图像裁剪解决方案,它通过与jQuery的无缝集成,为开发者提供了一种高效、灵活的方式来实现图像上传和裁剪功能。其强大的功能和广泛的自定义选项,使其...

    基于jquery网页截图插件(imgareaselect)

    【基于jQuery网页截图插件(imgareaselect)】是一个用于网页截取图像选定区域的JavaScript库,它与jQuery框架紧密集成,为用户提供了一个简单易用的交互式选择工具。这个插件允许用户在网页上自由划定一个矩形区域...

    imgareaselect.js使用教程

    `imgareaselect.js` 是一个强大且易于使用的图片选区插件,通过上述步骤和配置选项,你可以轻松地实现图片截取功能。在实际应用中,你可以根据项目需求进行调整和扩展,以满足各种复杂的场景。希望这篇教程对你在...

    jquery+php图片上传并剪切

    在本文中,我们将深入探讨如何使用jQuery、PHP和Ajax实现图片上传及剪切功能。这个技术组合常用于创建用户友好的、动态的Web应用程序,让用户能够方便地上传和编辑图片。 首先,`jQuery`是一个流行的JavaScript库,...

    jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一

    jQuery插件ImgAreaSelect是一个能够为图片添加可拖拽的裁剪框的插件,适合于在网页上实现图片上传预览和裁剪功能。为了实现头像上传、预览以及裁剪功能,我们需要遵循以下步骤: 首先,要明确目标功能: 1. 图片...

    imgareaselect.js ajaxfileupload.js

    将这两个插件结合使用,我们可以实现一个完整的图片裁剪与上传流程:首先,用户在网页上使用`imgareaselect.js` 选择图片的裁剪区域;然后,通过`ajaxfileupload.js` 将原始图片和选区信息一起上传到服务器;最后,...

Global site tag (gtag.js) - Google Analytics