首先给出效果图如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery图像照片剪裁插件Jcrop</title>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/drag.js"></script>
<script language="javascript" type="text/javascript">
var cut_div; //裁减图片外框div
var cut_img; //裁减图片
var imgdefw; //图片默认宽度
var imgdefh; //图片默认高度
var offsetx = 82; //图片位置位移x
var offsety = -193; //图片位置位移y
var divx = 284; //外框宽度
var divy = 266; //外框高度
var cutx = 120; //裁减宽度
var cuty = 120; //裁减高度
var zoom = 1; //缩放比例
var zmin = 0.1; //最小比例
var zmax = 10; //最大比例
var grip_pos = 5; //拖动块位置0-最左 10 最右
var img_grip; //拖动块
var img_track; //拖动条
var grip_y; //拖动块y值
var grip_minx; //拖动块x最小值
var grip_maxx; //拖动块x最大值
//图片初始化
function imageinit() {
cut_div = document.getElementById('cut_div');
cut_img = document.getElementById('cut_img');
// cut_div = $('#cut_div');
// cut_img = $('#cut_img');
imgdefw = cut_img.width;
imgdefh = cut_img.height;
if (imgdefw > divx) {
zoom = divx / imgdefw;
cut_img.width = divx;
cut_img.height = Math.round(imgdefh * zoom);
}
// cut_img.style.left = Math.round((divx - cut_img.width) / 2);
// cut_img.style.top = Math.round((divy - cut_img.height) / 2) - divy;
// alert(Math.round((divx - cut_img.width) / 2));
// alert(Math.round((divy - cut_img.height) / 2) - divy);
$('#cut_img').css('left',Math.round((divx - cut_img.width) / 2));
$('#cut_img').css('top',Math.round((divy - cut_img.height) / 2) - divy);
createPrew();
if (imgdefw > cutx) {
zmin = cutx / imgdefw;
} else {
zmin = 1;
}
zmax = zmin > 0.25 ? 8.0 : 4.0 / Math.sqrt(zmin);
if (imgdefw > cutx) {
zmin = cutx / imgdefw;
grip_pos = 5 * (Math.log(zoom * zmax) / Math.log(zmax));
} else {
zmin = 1;
grip_pos = 5;
}
Drag.init(cut_div, cut_img);
cut_img.onDrag = when_Drag;
}
//图片逐步缩放
function imageresize(flag) {
if (flag) {
zoom = zoom * 1.5;
} else {
zoom = zoom / 1.5;
}
if (zoom < zmin)
zoom = zmin;
if (zoom > zmax)
zoom = zmax;
cut_img.width = Math.round(imgdefw * zoom);
cut_img.height = Math.round(imgdefh * zoom);
checkcutpos();
grip_pos = 5 * (Math.log(zoom * zmax) / Math.log(zmax));
img_grip.style.left = (grip_minx + (grip_pos / 10 * (grip_maxx - grip_minx)))
+ "px";
}
//获得style里面定位
function getStylepos(e) {
return {
x : parseInt(e.style.left),
y : parseInt(e.style.top)
};
}
//获得绝对定位
function getPosition(e) {
var t = e.offsetTop;
var l = e.offsetLeft;
while (e = e.offsetParent) {
t += e.offsetTop;
l += e.offsetLeft;
}
return {
x : l,
y : t
};
}
//检查图片位置
function checkcutpos() {
var imgpos = getStylepos(cut_img);
max_x = Math.max(offsetx, offsetx + cutx - cut_img.clientWidth);
min_x = Math.min(offsetx + cutx - cut_img.clientWidth, offsetx);
if (imgpos.x > max_x)
cut_img.style.left = max_x + 'px';
else if (imgpos.x < min_x)
cut_img.style.left = min_x + 'px';
max_y = Math.max(offsety, offsety + cuty - cut_img.clientHeight);
min_y = Math.min(offsety + cuty - cut_img.clientHeight, offsety);
if (imgpos.y > max_y)
cut_img.style.top = max_y + 'px';
else if (imgpos.y < min_y)
cut_img.style.top = min_y + 'px';
}
//图片拖动时触发
function when_Drag(clientX, clientY) {
checkcutpos();
createPrew();
}
//获得图片裁减位置
function getcutpos() {
var imgpos = getStylepos(cut_img);
var x = offsetx - imgpos.x;
var y = offsety - imgpos.y;
var cut_pos = document.getElementById('cut_pos');
// cut_pos.value = x + ',' + y + ',' + cut_img.width + ','
// + cut_img.height;
$("#x").attr("value",x);
$("#y").attr("value",y);
$("#w").attr("value",cut_img.width);
$("#h").attr("value",cut_img.height);
return true;
}
//缩放条初始化
function gripinit() {
img_grip = document.getElementById('img_grip');
img_track = document.getElementById('img_track');
track_pos = getPosition(img_track);
grip_y = track_pos.y;
grip_minx = track_pos.x + 4;
grip_maxx = track_pos.x + img_track.clientWidth - img_grip.clientWidth
- 5;
img_grip.style.left = (grip_minx + (grip_pos / 10 * (grip_maxx - grip_minx)))
+ "px";
img_grip.style.top = grip_y + "px";
Drag.init(img_grip, img_grip);
img_grip.onDrag = grip_Drag;
}
//缩放条拖动时触发
function grip_Drag(clientX, clientY) {
var posx = clientX;
img_grip.style.top = grip_y + "px";
if (clientX < grip_minx) {
img_grip.style.left = grip_minx + "px";
posx = grip_minx;
}
if (clientX > grip_maxx) {
img_grip.style.left = grip_maxx + "px";
posx = grip_maxx;
}
grip_pos = (posx - grip_minx) * 10 / (grip_maxx - grip_minx);
zoom = Math.pow(zmax, grip_pos / 5) / zmax;
if (zoom < zmin)
zoom = zmin;
if (zoom > zmax)
zoom = zmax;
cut_img.width = Math.round(imgdefw * zoom);
cut_img.height = Math.round(imgdefh * zoom);
checkcutpos();
createPrew();
}
//页面载入初始化
function avatarinit() {
imageinit();
gripinit();
//刷新裁剪后的图片
// document.getElementById('cutimg_l').src = document
// .getElementById('cutimg_l').src
// + '?' + (new Date().getTime());
// document.getElementById('cutimg_m').src = document
// .getElementById('cutimg_m').src
// + '?' + (new Date().getTime());
// document.getElementById('cutimg_s').src = document
// .getElementById('cutimg_s').src
// + '?' + (new Date().getTime());
}
if (document.all) {
window.attachEvent('onload', avatarinit);
} else {
window.addEventListener('load', avatarinit, false);
}
/**
* 生成预览图片
*/
function createPrew(){
var xy_str = getcutpos();
if(xy_str){
var x = $("#x").val();
var y = $("#y").val();
var w = $("#w").val();
var h = $("#h").val();
// alert(x+"-"+y+"-"+w+"-"+h);
$("#prew").css({
width:w + "px", //预览图片宽度为计算比例值与原图片宽度的乘积
height:h + "px", //预览图片高度为计算比例值与原图片高度的乘积
marginLeft:"-" + x + "px",
marginTop:"-" + y + "px"
});
}
}
</script>
</head>
<body>
<span style="position:absolute; left:520px; top:0;height:120px;width:120px;overflow:hidden;"><img id="prew" src="22.jpg"/></span>
<input type="hidden" name="x" id="x" value=""/>
<input type="hidden" name="y" id="y" value=""/>
<input type="hidden" name="w" id="w" value=""/>
<input type="hidden" name="h" id="h" value=""/>
<div class="pleft">
<div class="leftspace">
<table width="100%" border="0">
<tr>
<td rowspan="2" valign="top">
<form name="setavatar" id="setavatar" action="__URL__/setavatar"
method="post" onsubmit="return getcutpos();">
<input name="imgname" type="hidden" value="{$imgname}" />
<div id="cut_div"
style="border: 2px solid #888888; width: 284px; height: 266px; overflow: hidden; position: relative; top: 0px; left: 0px; margin: 4px; cursor: pointer;">
<table
style="border-collapse: collapse; z-index: 10; filter: alpha(opacity = 75); position: relative; left: 0px; top: 0px; width: 284px; height: 266px; opacity: 0.75;"
cellspacing="0" cellpadding="0" border="0" unselectable="on">
<tr>
<td style="background: #cccccc; height: 73px;" colspan="3"></td>
</tr>
<tr>
<td style="background: #cccccc; width: 82px;"></td>
<td style="border: 1px solid #ffffff; width: 120px; height: 120px;"></td>
<td style="background: #cccccc; width: 82px;"></td>
</tr>
<tr>
<td style="background: #cccccc; height: 73px;" colspan="3"></td>
</tr>
</table>
<img id="cut_img" src="22.jpg" style="position: relative; top: -266px; left: 0px"/></div>
<table cellspacing="0" cellpadding="0">
<tr>
<td><img style="margin-top: 5px; cursor: pointer;"
src="img/_h.gif" alt="图片缩小"
onmouseover=
this.src = 'img/_c.gif';
onmouseout=
this.src = 'img/_h.gif';
onclick=
imageresize(false);
/></td>
<td><img id="img_track"
style="width: 250px; height: 18px; margin-top: 5px"
src="img/track.gif" /></td>
<td><img style="margin-top: 5px; cursor: pointer;"
src="img/+h.gif" alt="图片放大"
onmouseover=
this.src = 'img/+c.gif';
onmouseout=
this.src = 'img/+h.gif';
onclick=
imageresize(true);
/></td>
</tr>
</table>
<img id="img_grip"
style="position: absolute; z-index: 100; left: -1000px; top: -1000px; cursor: pointer;"
src="img/grip.gif" />
<div style="padding-top: 15px; padding-left: 5px;"><input
type="hidden" name="action" id="action" value="cutsave" /> <input
type="hidden" name="cut_pos" id="cut_pos" value="" /> <input
type="submit" class="button" name="submit" id="submit"
value=" 确认裁剪并提交 " /> <input type="button"
class="button" name="cancel" id="cancel" value=" 取消 "
onclick=
javascript: history.back(1);;
/></div>
</form>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
分享到：
相关推荐
【头像剪切demo】是一个基于JavaScript实现的实用插件示例，主要目的是提供一种便捷的方式让用户能够裁剪上传的头像，以满足网站或应用中个性化头像的需求。在这个项目中，我们关注的重点是JavaScript技术及其在图像...
综上所述，"小程序剪切头像demo"是一个适用于学习和实战的微信小程序开发案例，它通过`we-cropper`框架实现了头像剪切功能，并提供了易于理解和运行的代码示例，对小程序开发者尤其是新手来说具有很高的参考价值。
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现一个自定义的图片剪切器，特别关注头像剪切的功能。这个话题基于一位CSDN博主的文章，他在博客中分享了详细的实现过程，并且提供了源码...
【安卓QQ相关相关-qq头像剪裁类似于QQ的一种头像剪裁的Demo】 这个压缩包文件提供了一个安卓应用的示例，名为“PicCutDemo”，它实现了与QQ类似的头像裁剪功能。QQ作为中国最流行的即时通讯软件之一，其用户界面...
Android头像剪切，解决了上一版剪切结果偏移的问题。这里是Android Studio版，实现过程可到博客http://blog.csdn.net/qmln31821007/article/details/49995657中查看，博客中有Eclipse版demo下载
在IT行业中，头像剪切上传功能是许多网站和应用中的常见需求，它允许用户选择并裁剪自己的图片作为个人头像。这个"头像剪切上传jquery+java源码"是一个实现这一功能的示例项目，包含了前端的jQuery交互和后端的Java...
获取头像加剪切获取头像加剪切android头像上传（获取头像加剪切）android头像上传（获取头像加剪切）android头像上传（获取头像加剪切）android头像上传（获取头像加剪切）android头像上传（获取头像加剪切）android...
通过以上步骤，我们可以构建出一个类似“iOS导航头像缩放Demo”的功能。实际开发中，还需要根据具体需求调整细节，例如添加过渡动画、考虑各种屏幕尺寸的适配等。这个Demo提供了一个起点，开发者可以在此基础上进行...
we-cropper实现的小程序剪切头像demo。 本项目是基于微信小程序使用we-cropper框架实现的剪切头像功能的demo，并且简化代码，更加容易理解，本项目可直接运行在小程序编译器上。 微信小程序 小程序 剪切头像 we-...
完美的更换头像demo：自定义圆形头像，更换可拍照、从相册中选，然后可跳转到裁剪页面进行裁剪，确定后即可展示（并附有上传到后台的代码）
其次，“qq头像剪切”是一项关键功能。用户在选择图片后，通常需要裁剪出合适的区域作为头像。这通常通过JavaScript库如JQuery UI或Cropper.js实现。这些库提供了图形操作接口，允许用户在选定的图片上拖动选择框，...
本项目“头像裁剪demo”是模仿QQ头像裁剪功能的一个示例，提供了一个可以直接下载并运行的代码实现。这个demo旨在帮助开发者理解和实现自定义的头像裁剪功能，为用户提供一个友好的界面来选择和裁剪他们的头像。 ...
这个项目标题"高仿微信头像剪切"表明我们要实现的是一个与微信类似的功能，允许用户通过滑动、双击放大、缩小以及剪切操作来定制自己的头像。下面我们将详细讨论相关的知识点。 1. **自定义View**：为了实现这种...
本Demo提供了完整的代码实现，帮助开发者高效地构建类似QQ的头像选择和上传流程。在这个功能中，用户可以访问本地相册选取照片或者直接通过摄像头拍照，确保了多样化的头像来源。 首先，我们需要了解这个过程涉及的...
在IT行业中，头像剪裁是一项常见的功能，尤其在社交应用、个人资料设置或个性化服务中，用户常常需要上传并...通过学习和实践这个demo，开发者可以掌握创建自定义头像剪裁功能的核心技术，并将其应用于实际项目中。
"用户头像设置demo"是一个示例项目，专门针对这一功能进行了详尽的实现，涵盖了从拍照到选择已有图片的各种场景，确保了功能的稳定性和实用性。下面将详细探讨这个Demo中涉及的技术点、实现方法以及可能的应用场景。...
在IT行业中，前端开发经常会遇到用户需要上传头像并进行个性化剪切的需求，这能提升用户体验，让网站或应用更具个性化。"jQuery实现头像剪切"是一个典型的前端交互功能，它结合了图像处理和用户交互，使得用户可以...
【仿微信头像剪切】是一种常见的图像处理技术，它主要模仿了微信应用程序中的头像裁剪功能，让用户能够按照自己的喜好和需求调整并裁剪图片，以制作出适合社交媒体平台如微信、微博等的理想头像。这个过程涉及到多个...
在IT行业中，尤其是在Web开发领域，用户头像是一个常见的功能，用于标识用户或者展示个人形象。这个"两个上传头像的demo"很可能是...通过学习和实践这样的demo，开发者可以更好地掌握这些技能，并应用于实际项目中。