<?
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$file="7.jpg";
$imgs=imagecreatefromjpeg($file);
$x=imagesx($imgs);
$y=imagesy($imgs);
$x1=$_POST['x1'];
$x2=$_POST['x2'];
$y1=$_POST['y1'];
$y2=$_POST['y2'];
$w=$_POST['w']; //目标的宽度;
$h=$_POST['h']; //高
//imagecopyresampled ($目标图像资源,$源图像资源,$目标图像X轴,目标图像Y轴,$源图像X轴,$源图像Y轴,$目标图像宽度,$目标图像高度,$源图像宽度,$源图像高度 );
$imgt=imagecreatetruecolor($w,$h);
//imagecopyresized($imgt,$imgs,0,0,$x1,$y1,$w,$h,$w,$h);
imagecopyresampled($imgt,$imgs,0,0,$x1,$y1,$w,$h,$w,$h);
imagejpeg($imgt,"dcd.jpg");
imagedestroy($imgt);
imagedestroy($imgs);
echo "<img src=dcd.jpg />";
}
?>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="jquery.Jcrop.js"></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demos.css" type="text/css" />
<script language="Javascript">
jQuery(document).ready(function(){
$('#cropbox').Jcrop({
onChange: showCoords,
onSelect: showpic
});
});
function showpic(){
// alert('dc');
}
function showCoords(c)
{
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
if (parseInt(c.w) > 0)
{
var rx = 100 / c.w;
var ry = 100 / c.h;
$('#slt').css({
width: Math.round(rx*c.w) + 'px',
height: Math.round(ry *c.h) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
</script>
</head>
<body>
<img src="7.jpg" id="cropbox" />
<form method="post" action="">
<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
<label>W <input type="text" size="4" id="w" name="w" /></label>
<label>H <input type="text" size="4" id="h" name="h" /></label>
<input type="submit" value="生成" />
</form>
<div style="width:100px;height:100px;overflow:hidden;">
<img src="7.jpg" id="slt" />
</div>
</body>
</html>
分享到：
相关推荐
Jcrop是一款基于jQuery的开源图片裁剪插件，它提供了简单易用的API，使得开发者能够轻松地在网页中实现按比例或自由裁剪图片的功能。本文将详细介绍Jcrop的特性、使用方法以及如何通过其提供的示例快速上手。 首先...
- **图片裁剪服务**：提供一个简单的图片裁剪工具，用户可以快速地调整和裁剪图片。 - **屏幕截图**：虽然Jcrop本身不直接支持屏幕截图，但可以结合其他截图库，让用户选择截取屏幕的特定部分。 总的来说，jQuery ...
jcrop是一款开源的JavaScript组件，它提供了一种直观且易于使用的界面，让用户能够通过鼠标操作在网页上选择图片的特定区域进行裁剪。该库支持多种浏览器，包括Chrome、Firefox、Safari、Edge等，兼容性良好。 2. ...
Jcrop是一款广泛使用的JavaScript图像裁剪工具，它允许用户在网页上交互式地选择和裁剪图片。这个“jcrop图片裁剪demo”是展示如何集成和应用Jcrop的一个实例，方便开发者快速理解和使用。下面将详细介绍Jcrop的核心...
在本项目中，“PHP+jQuery+jCrop裁剪头像”是一个常见的在线图像处理应用场景，用于让用户自定义上传的头像尺寸，以满足特定的显示需求。以下是对该项目中涉及的关键技术点的详细解释： 1. **PHP**：PHP（Hypertext...
上述代码中，`#target`是待裁剪图片的ID，`Jcrop();`是初始化Jcrop的函数，通过jQuery选择器将Jcrop应用到指定的图片元素上。 Jcrop提供了一些关键配置选项，以满足不同需求。例如，你可以设置选区的最小和最大尺寸...
在本文中，我们将深入探讨如何使用Jcrop实现剪切上传图片以及相关的操作实例。 首先，Jcrop是基于jQuery库的，因此在使用Jcrop之前，你需要确保你的项目中已经引入了jQuery。你可以通过CDN或者本地文件的方式引入...
`jCrop` 是一个基于 jQuery 的强大图片裁剪插件，它允许用户在浏览器端选择并裁剪图像，然后将这些裁剪信息发送到服务器进行进一步处理。在这个项目中，`jCrop` 被用来配合 PHP 完成图片的上传和剪切功能。 1. **...
$('#target').Jcrop({ minSize: [190,190], //边框最小尺寸 //maxSize:[190,190], setSelect: [0,0,170,230], //创建边框参数【x,y,x1,y1】 onChange: updatePreview, //边框改变时发生的事件 onSelect: ...
struts2+jsp+jquery+Jcrop实现图片裁剪并上传, 参照http://blog.csdn.net/csd_xuming/article/details/8848939 的有效实现实例
这个"java+jq+jcrop缩放裁剪上传图片"的主题涵盖了三个关键部分：Java后端处理、jQuery（jq）前端交互以及Jcrop图像裁剪库的使用。下面将详细解释这三个方面的知识点。 首先，让我们来看看前端部分。jQuery（jq）是...
**正文** ...前端利用Jcrop实现交互式选取，后端用Java处理裁剪逻辑。通过这种方式，我们可以创建一个完整的图片裁剪服务，满足用户自定义裁剪需求，同时利用后端的强大处理能力确保裁剪的精度和效率。
Jcrop是一款广泛应用于网页开发中的JavaScript图像裁剪库，它允许用户在网页上交互式地选取图像的矩形区域，通常用于实现头像上传、图片预览或自定义尺寸截图等功能。这款工具的核心是其JavaScript代码，通过与HTML...
Jcrop是一款强大的JavaScript图片裁剪库，它允许用户在前端自由地选择和裁剪图片，广泛应用于网页中的图片预览、上传前的裁剪等场景。这款工具以其直观的用户界面和灵活的配置选项，深受开发者喜爱。 **一、Jcrop...
Jcrop 是一个基于 jQuery 的 JavaScript 图像裁剪插件，它允许用户在网页上选择并裁剪图像，常用于图片上传前的预览和编辑。这个插件为开发者提供了丰富的功能，包括动态调整选区、比例锁定、多边形裁剪等，极大地...
在IT行业中，图片处理是一项常见的需求，特别是在网页和应用程序中，用户可能需要上传并裁剪图片以满足特定的尺寸或比例。Jcrop是一款强大的JavaScript库，专门用于图像选择和裁剪，它允许用户通过浏览器直接操作...
1. **纯JavaScript** - 意味着jcrop完全用JavaScript编写，没有使用其他如Flash、Silverlight等插件，适应现代Web标准，可在各种浏览器上运行。 2. **非flash** - 强调了jcrop不依赖Flash，这符合当前的Web发展趋势...