官网地址:http://deepliquid.com/content/Jcrop.html
加载
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script src="js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
调用
jQuery(window).load(function(){
// Create variables (in this scope) to hold the API and image size
var jcrop_api, boundx, boundy;
jQuery('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1.4468
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = 204 / c.w;
var ry = 141 / c.h;
$('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
});
<img id="target" src="test.jpg" />
<div style="width:204px;height:141px;overflow:hidden;">
<img src="test.jpg" id="preview" alt="Preview" class="jcrop-preview" />
</div>
分享到:
相关推荐
**jQuery图片裁剪插件Jcrop.js** Jcrop.js是一款基于jQuery的开源图片裁剪工具,它为网页开发者提供了一种高效、灵活的方式来实现图像裁剪功能。在网页设计中,用户经常需要上传图片并根据需求进行裁剪,以适应特定...
jQuery图像裁剪插件Jcrop.js是一个用于网页前端的JavaScript库,它允许用户在浏览器上交互式地裁剪图像。这个插件是基于流行的jQuery框架构建的,因此它能够无缝集成到任何使用jQuery的项目中。Jcrop的核心功能是...
<... <head> <meta charset="utf-8" />...jQuery图片裁剪插件Jcrop.js<... Jcrop.js实现的一款功能强大的jQuery图片裁剪插件,可以结合后端程序快速的实现图像裁剪的功能,右侧有3个图像缩略图尺寸可选。
在jQuery生态中,有许多图片裁剪插件可供选择,如Cropper.js、Jcrop等。这些插件通常具有良好的浏览器兼容性,支持主流的Chrome、Firefox、Safari、Edge以及IE9+。兼容性是选择插件时的重要考量因素,确保用户在各种...
1. **jQuery插件**:jQuery Jcrop是一个JavaScript插件,它扩展了jQuery的功能,为图片裁剪提供了一套完整的解决方案。 2. **图像选择**:Jcrop允许用户通过鼠标拖动来选择图片的一部分,创建一个选区,这被称为...
总的来说,Jcrop是一款功能强大且灵活的图片裁剪插件,借助jQuery的强大功能,它在各种浏览器环境下表现出色,为开发者提供了丰富的选项来实现个性化的图片裁剪体验。无论你是初学者还是经验丰富的开发者,Jcrop都是...
**jQuery Jcrop 插件详解:打造跨浏览器的图片裁剪功能** 在Web开发中,图片裁剪功能常用于用户上传头像、编辑照片或进行个性化定制等场景。`jQuery Jcrop`是一款强大的JavaScript插件,它使得在浏览器中实现图片...
4. imgAreaSelect:一个简单但灵活的插件,允许用户通过鼠标绘制裁剪区域,可与其他jQuery插件配合使用。 5. Bootstrap Image Gallery with Cropper:基于Bootstrap框架,集成了Cropper.js,提供美观的图片预览和...
Jcrop是一款基于jQuery的图片裁剪插件,它允许用户在网页上自由选择图像的裁剪区域,从而实现自定义的图像裁剪功能。这款插件广泛应用于网站上的头像上传、图片预览和编辑等领域,为用户提供了一种简单易用的交互...
3. **jCrop**:jCrop是jQuery的一个插件,用于实现图像的选取和裁剪功能。它提供了一种直观的用户界面,允许用户通过拖动选择图像的一部分,然后将这些裁剪参数发送到服务器进行实际的裁剪操作。jCrop支持响应式设计...
Jcrop是一款基于jQuery的开源图片裁剪插件,它为Web开发者提供了在浏览器端实现图片裁剪功能的强大工具。这款插件广泛应用于各种需要用户自定义选择图片区域的场景,如上传头像、图片预览和编辑等。下面将详细介绍...
而Jcrop是基于jQuery的一个强大插件,专门用于实现...总之,Jcrop是一个强大且易用的jQuery插件,为网页图片裁剪提供了便捷的解决方案。通过灵活的配置和丰富的API,开发者可以轻松地集成图像裁剪功能到自己的项目中。
jQuery Jcrop是一个在前端广泛应用的JavaScript插件,专门用于实现图像裁剪功能。它与后端技术如Java相结合,能够为Web应用提供完整的图片处理解决方案。Jcrop的强大之处在于其简单易用的API,允许开发者轻松地将...
此时,JavaScript库如jQuery的插件就显得尤为重要,其中Jcrop.js就是一款强大的图像裁剪工具,它允许用户在前端直接对图像进行选择和裁剪,提供了丰富的自定义选项和事件处理,使得图片裁剪功能的实现变得简单易行。...
`AjaxFileUpload`是一个jQuery插件,用于在不刷新页面的情况下上传文件。它允许我们在后台处理文件上传,同时提供进度指示和错误处理功能。 以下是实现这个功能的步骤: 1. **HTML页面准备**:创建一个HTML表单,...
Jcrop 是一个基于 jQuery 的 JavaScript 图像裁剪插件,它允许用户在网页上选择并裁剪图像,常用于图片上传前的预览和编辑。这个插件为开发者提供了丰富的功能,包括动态调整选区、比例锁定、多边形裁剪等,极大地...
适应各浏览器图片裁剪无刷新上传js插件-Jcrop Jcrop js jquery C# asp.net 文件包括: WebForm1.aspx myupload.html jquery.Jcrop.min.css jquery.min.js jquery.Jcrop.min.js imageCropperUpload.js
jQuery插件jcrop是一个功能强大的图片裁剪工具,它允许用户在页面上定义一个裁剪区域,并通过用户交互来裁剪图片。jcrop提供了丰富的API来调整裁剪框的大小和位置,同时它也支持多种参数配置,比如裁剪比例、裁剪框...
在本实例中,Servlet将接收来自前端的裁剪参数和原始图片数据,然后进行图片裁剪操作。以下是一些Servlet处理图片的关键步骤: 1. 接收数据:Servlet需要解析AJAX请求,获取上传的文件和裁剪参数。 2. 图片处理:...