09.10.2010, 23:20
|
 |
Интересующийся
|
|
Регистрация: 09.10.2010
Сообщений: 11
|
|
|
Обрезать картинку
Столкнулся с такой проблемой. Есть картинка, загруженная пользователем, где он отмечает то место, которое хотел бы обрезать.
Пример:
demo.jpg
Мне нужно сделать так, чтобы после нажатия кнопки отправить, картинка обрезалась и открылась на новой странице.
Не знаю, как это можно сделать.
Последний раз редактировалось Index.html, 09.10.2010 в 23:26.
|
|
10.10.2010, 00:07
|
|
Особый гость
|
|
Регистрация: 02.04.2010
Сообщений: 4,260
|
|
|
Последний раз редактировалось monolithed, 10.10.2010 в 00:35.
|
|
10.10.2010, 09:08
|
|
Интересующийся
|
|
Регистрация: 09.10.2010
Сообщений: 11
|
|
|
Там дана, насколько я понимаю, только демо-версия. После нажатия на кнопку, картинка не обрезается.
Последний раз редактировалось Index.html, 10.10.2010 в 09:22.
|
|
10.10.2010, 10:46
|
|
Особый гость
|
|
Регистрация: 02.04.2010
Сообщений: 4,260
|
|
Нет, там даны все исходники.
А для того чтобы работал демонстрационный пример нужно разрешить в браузере открывать всплывающие окна (свою реализацию конечно нужно делать по иному)!
Но если вы не понимаете таких элементарных вещей, то на форуме есть раздел работа |
|
10.10.2010, 20:45
|
|
Особый гость
|
|
Регистрация: 02.04.2010
Сообщений: 4,260
|
|
|
У меня все работает, нужно установить исходники на локальной машине и пробовать, только не создавать window.open(), делать подмену изображения
|
|
14.10.2010, 08:37
|
|
Интересующийся
|
|
Регистрация: 09.10.2010
Сообщений: 11
|
|
|
Выложи пож-ста исправленный вариант этих файлов:
image-crop.html и crop_image.php
Новичку в javascript пока трудно разобраться во всем этом)
Последний раз редактировалось Index.html, 14.10.2010 в 08:55.
|
|
14.10.2010, 09:43
|
|
Особый гость
|
|
Регистрация: 02.04.2010
Сообщений: 4,260
|
|
Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума " Работа".
Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела. |
|
14.10.2010, 15:35
|
|
Интересующийся
|
|
Регистрация: 09.10.2010
Сообщений: 11
|
|
Я же не прошу написать скрипт. Я прошу помочь мне и подправить там, где это нужно.
Если нужны скрипты пожалуйста:
image-crop.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image crop - DHTML user interface</title>
<link rel="stylesheet" href="css/xp-info-pane.css">
<link rel="stylesheet" href="css/image-crop.css">
<script type="text/javascript" src="js/xp-info-pane.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
var crop_script_server_file = 'crop_image.php';
var cropToolBorderWidth = 1; // Width of dotted border around crop rectangle
var smallSquareWidth = 7; // Size of small squares used to resize crop rectangle
// Size of image shown in crop tool
var crop_imageWidth = 600;
var crop_imageHeight = 450;
// Size of original image
var crop_originalImageWidth = 2272;
var crop_originalImageHeight = 1704;
var crop_minimumPercent = 10; // Minimum percent - resize
var crop_maximumPercent = 200; // Maximum percent -resize
var crop_minimumWidthHeight = 15; // Minimum width and height of crop area
var updateFormValuesAsYouDrag = true; // This variable indicates if form values should be updated as we drag. This process could make the script work a little bit slow. That's why this option is set as a variable.
if(!document.all)updateFormValuesAsYouDrag = false; // Enable this feature only in IE
/* End of variables you could modify */
</script>
<script type="text/javascript" src="js/image-crop.js"></script>
</head>
<body>
<div id="pageContent">
<div id="dhtmlgoodies_xpPane">
<div class="dhtmlgoodies_panel">
<div>
<!-- Start content of pane -->
<form>
<input type="hidden" id="input_image_ref" value="demo-images/nature_orig.jpg">
<table>
<tr>
<td>X:</td><td><input type="text" class="textInput" name="crop_x" id="input_crop_x"></td>
</tr>
<tr>
<td>Y:</td><td><input type="text" class="textInput" name="crop_y" id="input_crop_y"></td>
</tr>
<tr>
<td>Width:</td><td><input type="text" class="textInput" name="crop_width" id="input_crop_width"></td>
</tr>
<tr>
<td>Height:</td><td><input type="text" class="textInput" name="crop_height" id="input_crop_height"></td>
</tr>
<tr>
<td>Percent size:</td><td><input type="text" class="textInput" name="crop_percent_size" id="crop_percent_size" value="100"></td>
</TR>
<tr>
<td>Convert to:</td>
<td>
<select class="textInput" id="input_convert_to">
<option value="gif">Gif</option>
<option value="jpg" selected>Jpg</option>
<option value="png">Png</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td id="cropButtonCell"><input type="button" onclick="cropScript_executeCrop(this)" value="Crop">
</td>
</tr>
</table>
<div id="crop_progressBar">
</div>
</form>
<!-- End content -->
</div>
</div>
<div class="dhtmlgoodies_panel">
<div>
<!-- Start content of pane -->
<table>
<tr>
<td><b>Picture from Norway</b></td>
</tr>
<tr>
<td>Dimension: <span id="label_dimension"></span></td>
</tr>
</table>
<!-- End content -->
</div>
</div>
<div class="dhtmlgoodies_panel">
<div>
<!-- Start content of pane -->
To select crop area, drag and move the dotted rectangle or type in values directly into the form.
<!-- End of content -->
</div>
</div>
</div>
<div class="crop_content">
<div id="imageContainer">
<img src="demo-images/nature.jpg">
</div>
</div>
</div>
<script type="text/javascript">
initDhtmlgoodies_xpPane(Array('Crop inspector','Image details','Instructions'),Array(true,true),Array('pane1','pane2','pane3'));
init_imageCrop();
</script>
</body>
</html>
|
|
14.10.2010, 15:37
|
|
Интересующийся
|
|
Регистрация: 09.10.2010
Сообщений: 11
|
|
crop_image.php
<?
/*
This file should be used to crop an image
Input to this file:
$_POST['image_ref']
$_POST['x']
$_POST['y']
$_POST['width']
$_POST['height']
$_POST['convertTo']
$_POST['percentSize']
*/
define("IMAGE_MAGICK_PATH","/imagemagick/");
if(isset($_POST['image_ref']) && isset($_POST['x']) && isset($_POST['y']) && isset($_POST['x']) && isset($_POST['width']) && isset($_POST['convertTo'])){
// Use Imagemagick(www.imagemagick.org), Image Alchemy(Alchemy)
$x = escapeshellarg($_POST['x']);
$y = escapeshellarg($_POST['y']);
$width = escapeshellarg($_POST['width']);
$height = escapeshellarg($_POST['height']);
$image_ref = escapeshellarg($_POST['image_ref']);
$percentSize = escapeshellarg($_POST['percentSize']);
$convertTo = escapeshellarg($_POST['convertTo']);
$x = preg_replace("/[^0-9]/si","",$x);
$y = preg_replace("/[^0-9]/si","",$y);
$width = preg_replace("/[^0-9]/si","",$width);
$height = preg_replace("/[^0-9]/si","",$height);
$percentSize = preg_replace("/[^0-9]/si","",$percentSize);
// You need to validate some of the variables above in case someone is calling this file directly from their browser and not from the crop script
// This is some examples:
$image_ref = str_replace("../","",$image_ref);
if(substr($image_ref,0,1)=="/")exit;
if($percentSize>200)$percentSize = 200;
if(strlen($x) && strlen($y) && $width && $height && $percentSize){
$convertParamAdd = "";
if($percentSize!="100"){
$convertParamAdd = " -resize ".$percentSize."x".$percentSize."%";
$x = $x * ($percentSize/100);
$y = $y * ($percentSize/100);
$width = $width * ($percentSize/100);
$height = $height * ($percentSize/100);
}
$destinationFile = "demo-images/nature_copy.jpg"; // Name of the converted file.
$convertString = IMAGE_MAGICK_PATH."convert $image_ref $convertParamAdd -crop ".$width."x".$height."+".$x."+".$y." $destinationFile";
$convertString = str_replace(";","",$convertString);
#exec($convertString);
echo "alert('The image you will see in the next popup is only a demo image.\\nYou have to enable ImageMagick on your site in order to crop images\\n\\nPs! The script is tested with ImageMagick locally.');";
echo "var w = window.open('$destinationFile','imageWin','width=630,height=330,resizable=yes');";
}else{
echo "alert('Error!');";
}
}
?>
|
|
|
|
