<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<script type="text/javascript">
function preview(img, selection) {
if (!selection.width || !selection.height)
return;
var scaleX = 88 / selection.width;
var scaleY = 88 / selection.height;
$('#preview1 img').css({
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
scaleX = 64 / selection.width;
scaleY = 64 / selection.height;
$('#preview2 img').css({
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
scaleX = 40 / selection.width;
scaleY = 40 / selection.height;
$('#preview img').css({
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
$(function () {
$('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,
fadeSpeed: 200, onSelectChange: preview, show: true,x1:0,y1:0, x2:88,y2:88});
});
</script>
</head>
<body>
<h2>Live Example</h2>
<div class="container demo">
<div style="float: left; width: 50%;">
<p class="instructions">
Click and drag on the image to select an area.
</p>
<input type="file" id="upload" onchange="PreviewImage('Preview',this,300,300);" />
<p></p>
<div class="frame" style="margin: 0 0.3em; width: 300px; height: 300px;">
<img id="photo" src="image/flower2.jpg" />
</div>
</div>
<div style="float: left; width: 50%;">
<p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">
Selection Preview
</p>
<div class="frame"
style="margin: 0 1em; width: 88px; height: 88px;">
<div id="preview1" style="width: 88px; height: 88px; overflow: hidden;">
<img src="image/flower2.jpg" style="width: 88px; height: 88px;" />
</div>
</div>
<br/>
<div class="frame"
style="margin: 0 1em; width: 64px; height: 64px;">
<div id="preview2" style="width: 64px; height: 64px; overflow: hidden;">
<img src="image/flower2.jpg" style="width: 64px; height: 64px;" />
</div>
</div>
<br />
<div class="frame"
style="margin: 0 1em; width: 40px; height: 40px;">
<div id="preview" style="width: 40px; height: 40px; overflow: hidden;">
<img src="image/flower2.jpg" style="width: 40px; height: 40px;" />
</div>
</div>
<br/>
<table style="margin-top: 1em;">
<thead>
<tr>
<th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
Coordinates
</th>
<th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
Dimensions
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
<td style="width: 30%;"><input type="text" id="x1" value="-" /></td>
<td style="width: 20%;"><b>Width:</b></td>
<td><input type="text" value="-" id="w" /></td>
</tr>
<tr>
<td><b>Y<sub>1</sub>:</b></td>
<td><input type="text" id="y1" value="-" /></td>
<td><b>Height:</b></td>
<td><input type="text" id="h" value="-" /></td>
</tr>
<tr>
<td><b>X<sub>2</sub>:</b></td>
<td><input type="text" id="x2" value="-" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Y<sub>2</sub>:</b></td>
<td><input type="text" id="y2" value="-" /></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
分享到：
相关推荐
1. **引入资源**：首先，需要在页面中引入jQuery库和imgAreaSelect插件的CSS及JS文件。例如： ```html <script src="jquery.js"> <link href="jquery.imgareaselect.css" rel="stylesheet" /> <script src="jquery....
要在项目中使用imgareaselect，首先需要引入jQuery库以及imgareaselect的CSS和JS文件。在HTML文件中添加如下引用： ```html <link rel="stylesheet" href="path/to/jquery.imgareaselect.css" /> ...
### JavaScript截图 jQuery插件imgAreaSelect用法详解 #### 一、引言 在Web开发中，用户自定义头像的功能越来越受到重视。为了提供更好的用户体验，很多网站尤其是社交网络平台，都允许用户通过简单的操作来自定义...
imgAreaSelect插件通过在页面中动态创建div元素来表示选区，这些元素拥有特定的类名，如`imgareaselect-border1`等，便于开发者通过CSS或jQuery选择器进行操作。前缀`imgareaselect`是可以自定义的，通过`class...
1. 引入jQuery库：imgareaselect插件依赖jQuery，因此首先需要在页面中引入jQuery 1.6.2或更高版本。 ```html <script src="jquery-1.6.2.min.js"> ``` 2. 引入imgareaselect插件文件：接着引入imgareaselect的CSS和...
jQuery.imgAreaSelect是一款强大的图片选区插件，它允许用户在网页上自由选择图片的某一区域，广泛应用于图片裁剪、标注等场景。0.9.10版本提供了丰富的配置选项和事件监听，可以灵活定制用户界面和交互行为。例如，...
在本示例中，我们将探讨如何结合JQuery ImgAreaSelect插件，实现在ASP.NET环境中上传图片并进行在线剪裁的功能。 JQuery ImgAreaSelect是一个jQuery插件，它提供了在网页上选择图像区域的能力。这个功能对于用户...
例如，你可以将选区的坐标发送到服务器进行裁剪操作，或者在前端直接处理图片。`jquery.imgareaselect-0.9.10.zip` 包含了该插件的源代码、示例和必要的CSS样式文件，以便开发者在项目中集成并自定义。 另一方面，`...
在IT行业中，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本文将深入探讨“jQuery插件-imgAreaSelect Demo”，这是一个用于实现类似论坛上传头像时进行图片裁剪...
在开发Web应用时，图片上传、裁剪及预览功能是非常常见且实用的特性，尤其在用户需要上传个性化头像或者商品图片时。本项目利用`uploadify`和`imgareaselect`两个JavaScript插件，结合后台Java代码，提供了一个完整...
在使用imgAreaSelect时，你需要在页面中引入jQuery库和imgAreaSelect的JavaScript及CSS文件。然后，选择一个或多个图片元素应用该插件，并设置相应的选项。例如，你可以指定选区的初始位置、大小，以及是否允许用户...
在项目中使用`imgareaselect`，首先需要引入jQuery库，然后引入imgareaselect的CSS和JavaScript文件。接着，你可以通过jQuery的选择器找到图片元素，调用`imgAreaSelect`方法来启用截图功能。例如： ```javascript...
1. **引入资源**：首先，在HTML页面中引入jQuery库和imgAreaSelect的JS和CSS文件。 2. **初始化插件**：通过jQuery的选择器找到需要添加截取功能的`<img>`元素，然后调用`imgAreaSelect`方法进行初始化，并传入配置...
在IT行业中，前端开发经常需要处理用户上传图片的需求，而"jQuery+ajaxupload+imgareaselect+asp.net上传预览截取图像"这个主题，就是一种高效且用户体验优秀的解决方案。接下来，我们将深入探讨这些技术及其整合...
在本文中，我们将探讨如何利用jQuery插件imgAreaSelect实现图片上传裁剪并进行放大缩小操作。imgAreaSelect是一款强大的jQuery插件，专门用于在网页上实现图片的选择和裁剪功能，非常适合于需要用户自定义选取图片...
在我们的案例中，`jquery.imgareaselect-0.9.8`是一个jQuery插件，用于图片剪切。它提供了交互式的选区功能，让用户可以自由选择图片的裁剪区域。使用这个插件，我们可以实现在客户端预览并指定裁剪区域，然后只上传...
在图像处理领域，有时我们需要对特定的图像区域进行操作，比如裁剪、编辑或分析。在Web应用中，我们可以利用JavaScript库，如jQuery，来实现这样的功能。jQuery的一个强大插件——imgAreaSelect，就提供了方便的方式...
2. 动态裁剪或缩放：使用jQuery插件如imgAreaSelect或cropper.js，允许用户在手机上预览和裁剪图片，使其适应屏幕。 六、优化性能 1. 延迟加载：对于非首屏的图片，使用jQuery延迟加载插件，如lazyLoadXT，只有在...
通过jQuery，开发者可以快速实现页面元素的选择、操作和交互，而无需关注浏览器兼容性问题。 **imgareaselect插件** imgareaselect是一个专门用于图片区域选择的jQuery插件，它提供了一套完整的API和丰富的样式...
使用这个插件时，开发者需要在HTML页面中引入jQuery库、imgareaselect插件和上传裁剪插件的脚本，然后按照文档提供的API和示例进行配置。用户在前端选择并裁剪图片后，通过Ajax提交裁剪信息到后台，后台根据这些信息...