Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.10.2010, 23:20
Аватар для Index.html
Интересующийся
Отправить личное сообщение для Index.html Посмотреть профиль Найти все сообщения от Index.html
 
Регистрация: 09.10.2010
Сообщений: 11

Обрезать картинку
Столкнулся с такой проблемой. Есть картинка, загруженная пользователем, где он отмечает то место, которое хотел бы обрезать.

Пример:
demo.jpg

Мне нужно сделать так, чтобы после нажатия кнопки отправить, картинка обрезалась и открылась на новой странице.

Не знаю, как это можно сделать.

Последний раз редактировалось Index.html, 09.10.2010 в 23:26.
Ответить с цитированием
  #2 (permalink)  
Старый 10.10.2010, 00:07
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

http://www.dhtmlgoodies.com/scripts/...mage-crop.html

Последний раз редактировалось monolithed, 10.10.2010 в 00:35.
Ответить с цитированием
  #3 (permalink)  
Старый 10.10.2010, 09:08
Аватар для Index.html
Интересующийся
Отправить личное сообщение для Index.html Посмотреть профиль Найти все сообщения от Index.html
 
Регистрация: 09.10.2010
Сообщений: 11

Там дана, насколько я понимаю, только демо-версия. После нажатия на кнопку, картинка не обрезается.

Последний раз редактировалось Index.html, 10.10.2010 в 09:22.
Ответить с цитированием
  #4 (permalink)  
Старый 10.10.2010, 10:46
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Нет, там даны все исходники.
А для того чтобы работал демонстрационный пример нужно разрешить в браузере открывать всплывающие окна (свою реализацию конечно нужно делать по иному)!

Но если вы не понимаете таких элементарных вещей, то на форуме есть раздел работа
Ответить с цитированием
  #5 (permalink)  
Старый 10.10.2010, 20:37
Аватар для Index.html
Интересующийся
Отправить личное сообщение для Index.html Посмотреть профиль Найти все сообщения от Index.html
 
Регистрация: 09.10.2010
Сообщений: 11

У меня все разрешено. Но все равно, при открытые всплывающего окна, картинка не обрезается. Исходники качал отсюда:
http://www.dhtmlgoodies.com/index.ht...ipt=image-crop
Ответить с цитированием
  #6 (permalink)  
Старый 10.10.2010, 20:45
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

У меня все работает, нужно установить исходники на локальной машине и пробовать, только не создавать window.open(), делать подмену изображения
Ответить с цитированием
  #7 (permalink)  
Старый 14.10.2010, 08:37
Аватар для Index.html
Интересующийся
Отправить личное сообщение для Index.html Посмотреть профиль Найти все сообщения от Index.html
 
Регистрация: 09.10.2010
Сообщений: 11

Выложи пож-ста исправленный вариант этих файлов:
image-crop.html и crop_image.php

Новичку в javascript пока трудно разобраться во всем этом)

Последний раз редактировалось Index.html, 14.10.2010 в 08:55.
Ответить с цитированием
  #8 (permalink)  
Старый 14.10.2010, 09:43
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела.
Ответить с цитированием
  #9 (permalink)  
Старый 14.10.2010, 15:35
Аватар для Index.html
Интересующийся
Отправить личное сообщение для Index.html Посмотреть профиль Найти все сообщения от Index.html
 
Регистрация: 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>
Ответить с цитированием
  #10 (permalink)  
Старый 14.10.2010, 15:37
Аватар для Index.html
Интересующийся
Отправить личное сообщение для Index.html Посмотреть профиль Найти все сообщения от Index.html
 
Регистрация: 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!');";
	}	
}


?>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фоновую картинку поменять. Jurasmi Элементы интерфейса 11 08.10.2012 15:25
Нужно убрать картинку valeriys Общие вопросы Javascript 5 13.09.2010 13:40
Как поменять картинку при нажатии на нее syegorius Events/DOM/Window 1 28.08.2010 23:14
Как передать картинку из javascript в php KIVagant AJAX и COMET 3 12.05.2010 11:54
Как обрезать строку в переменной mazovski Общие вопросы Javascript 2 08.04.2010 17:14