Всем привет, с наступающий. Подскажите со следующей проблемой, если страница на который находится изображение Код (Text): <div class="img"><img src="1.jpg" /></div> Его размер составляет 2500х2000, мой монитор шириной 1920, поэтому я стилю картинки пишу 99% для того чтобы она отображалась в пределах монитора. И тут с crop у меня возникли проблемы, он вырезает не то что нужно, так как картинка уменьшена до пределов монитора Все делаю следующим образом, на странице находится следующее Код (Text): <?php list($width, $height) = getimagesize('1.jpg');?> сама картинка <div class="img"><img id="phote" src="1.jpg" /></div> форма передает пост запросы <form action="/crop.php" method="post"> <input type="hidden" name="img" value="1.jpg" /> <input type="hidden" name="x1" value="" /> <input type="hidden" name="y1" value="" /> <input type="hidden" name="x2" value="" /> <input type="hidden" name="y2" value="" /> <input type="hidden" name="w" value="" /> <input type="hidden" name="h" value="" /> <input type="submit" value="crop" /> </form> далее подключаю скрипты Код (Text): <script type="text/javascript" src="/crop/jquery.imgareaselect.pack.js"></script> <script type="text/javascript"> function preview(img, selection) { var scaleX = 100 / (selection.width || 1); var scaleY = 100 / (selection.height || 1); $('#photo + div > img').css({ width: Math.round(scaleX * <?=$width;?>) + 'px', height: Math.round(scaleY * <?=$height;?>) + 'px', marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' }); } $(document).ready(function () { $('<div class="prev"><img src="1.jpg" style="position: relative;" /><div>') .css({ float: 'left', position: 'relative', overflow: 'hidden', width: '100px', height: '100px' }) .insertAfter($('#photo')); $('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true, onSelectChange: preview, onSelectEnd: function ( image, selection ) { $('input[name=x1]').val(selection.x1); $('input[name=y1]').val(selection.y1); $('input[name=x2]').val(selection.x2); $('input[name=y2]').val(selection.y2); $('input[name=w]').val(selection.width); $('input[name=h]').val(selection.height); } }); }); </script> Обработчик Код (Text): $filename = $_POST['img']; list($current_width, $current_height) = getimagesize($filename); // The x and y coordinates on the original image where we // will begin cropping the image, taken from the form $x1 = $_POST['x1']; $y1 = $_POST['y1']; $x2 = $_POST['x2']; $y2 = $_POST['y2']; $w = $_POST['w']; $h = $_POST['h']; //die(print_r($_POST)); // This will be the final size of the image $crop_width = $w; $crop_height = $h; // Create our small image $new = imagecreatetruecolor($crop_width, $crop_height); // Create original image $current_image = imagecreatefromjpeg($filename); // resamling (actual cropping) header('Content-type: image/jpeg'); header('Content-Disposition: attachment; filename="crop.jpg"'); imagecopyresampled($new, $current_image, 0, 0, $x1, $y1, $crop_width, $crop_height, $w, $h); // creating our new image imagejpeg($new, $new_filename, 95); Выручайте, как быть и что делать? Не хочется картинку выводить полным размером, так как она вылазит за приделы шаблона
Можешь просто написать, к примеру Код (Text): <img src="/images/image.jpg" class="fullWidthImage" /> <script type="text/javascript"> $('.fullWidthImage').css(width: (document.compatMode == 'CSS1Compat' && !window.opera ? document.documentElement.clientWidth : document.body.clientWidth)); </script> Или вообще проставить вручную ширину: Код (Text): <img src="image.jpg" width="1024" />
в ручную не получится, так как изображения разные, да и мониторы у всех разные =( сидел крутил, так и не додумался ни до чего. основная проблема в том что скрипт получается берет оригинальные размеры, т.е. в файл обработчик попадает ширина и высота изображения, а так же координаты что именно выпелить нужно, в итоге, выделяешь область в центре, а получаешь картинку совсем другую, ширину выделенной области он берет ту что надо, а вот с координатами где выпилить проблемы =( Видать нужно как то подогнанную ширину изображения передать в обработчик, чтобы он с этой же ширины и выпиливал, хотя может и что то другое можно сделать. на сайте http://odyniec.net/projects/imgareaselect/usage.html вроде пишут что можно определить Код (Text): imageHeight True height of the image (if scaled with the CSS width and height properties) imageWidth True width of the image (if scaled with the CSS width and height properties) пробовал вписать в функцию после Код (Text): $('#photo').imgAreaSelect({ Код (Text): imageHeight: true, imageWidth: true но что то не помогло =(