Как разрезать изображение на веб-страницу

Question

Я хотел бы показать часть изображения на моей веб-странице. Предположим, что оригинальный формат 1024x768, показанное изображение должно быть 100x768. Это не изменение размера, а простой разрез, начиная с 0,0 пикселя. Есть предложения?

Answer 1

Использовать CSS свойство Clip:

img { position:absolute; clip:rect(0px 60px 200px 0px) }

Или используйте переполнение для контейнера:

<div style="overflow:hidden; width:100px; height:76px;">
  <img src="myImage.jpg" />
</div>

Answer 2

Вы можете использовать CSS-клип , чтобы показать только часть изображения, например:

img {
    position:absolute;
    clip:rect(0px,100px,768px,0px);
}

Answer 3

Другим решением будет вставка изображения в качестве фонового изображения.

<div style="width: 768px; height: 100px; background: url(theimage.jpg) no-repeat left top;"></div>

Answer 4

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

Answer 5

Обрезка изображения или использование существующей библиотеки, WideImage является одним из лучших для такого рода операций.

Answer 6

Обратите внимание, что CSS-решения на самом деле загружают все изображение, а затем показывают только его верхнюю часть.

В зависимости от использования я бы предложил использовать сценарий динамической обрезки или кэширование предварительно обрезанных изображений.

Сценарий обрезки будет выглядеть примерно так:

<?php

// get parameters
$fname = (string) $_GET['f'];
$top = (int) $_GET['h'];

// load original
$old = imagecreatefromjpeg($fname);
list($width, $height) = getimagesize($fname);
   // N.B. this reloads the whole image! Any way to get
   // width/height directly from $old resource handle??

// create new canvas
$new = imagecreatetruecolor($width, $top);

// copy portion of image
imagecopy($dest, $src, 0, 0, 0, 0, $width, $top);

// Output and free from memory
header('Content-Type: image/jpeg');
imagejpg($new);

?>

и будет вызываться с вашей веб-страницы как:

<img src="crop.php?f=myimg.jpg&h=100" />