PHP « Битрикс — квадратная миниатюра
Как сделать самым оптимальным образом масштабирование произвольного изображения под заданный квадратный размер ?
Чтобы если например 3*6 или 6*3, просто обрезалось не нужное как бы, а квадратик был закрашен полностью.
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .php.geshi_code {font-family:monospace;} .php.geshi_code .imp {font-weight: bold; color: red;} .php.geshi_code .kw1 {color: #b1b100;} .php.geshi_code .kw2 {color: #000000; font-weight: bold;} .php.geshi_code .kw3 {color: #990000;} .php.geshi_code .co1 {color: #666666; font-style: italic;} .php.geshi_code .co2 {color: #666666; font-style: italic;} .php.geshi_code .co3 {color: #0000cc; font-style: italic;} .php.geshi_code .co4 {color: #009933; font-style: italic;} .php.geshi_code .coMULTI {color: #666666; font-style: italic;} .php.geshi_code .es0 {color: #000099; font-weight: bold;} .php.geshi_code .es1 {color: #000099; font-weight: bold;} .php.geshi_code .es2 {color: #660099; font-weight: bold;} .php.geshi_code .es3 {color: #660099; font-weight: bold;} .php.geshi_code .es4 {color: #006699; font-weight: bold;} .php.geshi_code .es5 {color: #006699; font-weight: bold; font-style: italic;} .php.geshi_code .es6 {color: #009933; font-weight: bold;} .php.geshi_code .es_h {color: #000099; font-weight: bold;} .php.geshi_code .br0 {color: #009900;} .php.geshi_code .sy0 {color: #339933;} .php.geshi_code .sy1 {color: #000000; font-weight: bold;} .php.geshi_code .st0 {color: #0000ff;} .php.geshi_code .st_h {color: #0000ff;} .php.geshi_code .nu0 {color: #cc66cc;} .php.geshi_code .nu8 {color: #208080;} .php.geshi_code .nu12 {color: #208080;} .php.geshi_code .nu19 {color:#800080;} .php.geshi_code .me1 {color: #004000;} .php.geshi_code .me2 {color: #004000;} .php.geshi_code .re0 {color: #000088;} .php.geshi_code span.xtra { display:block; }
$pic = CFile::ResizeImageGet($skuPicture, array('width'=>54, 'height'=>54), BX_RESIZE_IMAGE_PROPORTIONAL, true);
вот так вот получается по одной из сторон 54px. надо чтобы 54 было с обоих сторон и не искажалось а обрезалось изображение...
Чтобы если например 3*6 или 6*3, просто обрезалось не нужное как бы, а квадратик был закрашен полностью.
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .php.geshi_code {font-family:monospace;} .php.geshi_code .imp {font-weight: bold; color: red;} .php.geshi_code .kw1 {color: #b1b100;} .php.geshi_code .kw2 {color: #000000; font-weight: bold;} .php.geshi_code .kw3 {color: #990000;} .php.geshi_code .co1 {color: #666666; font-style: italic;} .php.geshi_code .co2 {color: #666666; font-style: italic;} .php.geshi_code .co3 {color: #0000cc; font-style: italic;} .php.geshi_code .co4 {color: #009933; font-style: italic;} .php.geshi_code .coMULTI {color: #666666; font-style: italic;} .php.geshi_code .es0 {color: #000099; font-weight: bold;} .php.geshi_code .es1 {color: #000099; font-weight: bold;} .php.geshi_code .es2 {color: #660099; font-weight: bold;} .php.geshi_code .es3 {color: #660099; font-weight: bold;} .php.geshi_code .es4 {color: #006699; font-weight: bold;} .php.geshi_code .es5 {color: #006699; font-weight: bold; font-style: italic;} .php.geshi_code .es6 {color: #009933; font-weight: bold;} .php.geshi_code .es_h {color: #000099; font-weight: bold;} .php.geshi_code .br0 {color: #009900;} .php.geshi_code .sy0 {color: #339933;} .php.geshi_code .sy1 {color: #000000; font-weight: bold;} .php.geshi_code .st0 {color: #0000ff;} .php.geshi_code .st_h {color: #0000ff;} .php.geshi_code .nu0 {color: #cc66cc;} .php.geshi_code .nu8 {color: #208080;} .php.geshi_code .nu12 {color: #208080;} .php.geshi_code .nu19 {color:#800080;} .php.geshi_code .me1 {color: #004000;} .php.geshi_code .me2 {color: #004000;} .php.geshi_code .re0 {color: #000088;} .php.geshi_code span.xtra { display:block; }
$pic = CFile::ResizeImageGet($skuPicture, array('width'=>54, 'height'=>54), BX_RESIZE_IMAGE_PROPORTIONAL, true);
вот так вот получается по одной из сторон 54px. надо чтобы 54 было с обоих сторон и не искажалось а обрезалось изображение...
1 ответов
Разобрался сам в итоге.
Теория взята отсюда http://xpoint.ru/know-how/Articles/TeoriyaIPraktikaSozdaniyaMiniatyurnyihIzobrazheniy
На практике вот так работает:
<?//Resize crop image by min side
$skuPictureW=//$ШИРИНА КАРТИНКИ;
$skuPictureH=//$ВЫСОТА КАРТИНКИ;
$needPictureW=$needPictureH=54;
$checkSizeW=$skuPictureW/$needPictureW;
$checkSizeH=$skuPictureH/$needPictureH;
if ($checkSizeW > $checkSizeH) {
$skuPictureW=$needPictureW*$checkSizeH;
$pic = CFile::ResizeImageGet($skuPicture, array('width'=>$skuPictureW, 'height'=>$needPictureH), BX_RESIZE_IMAGE_PROPORTIONAL, true);
} else {
$skuPictureH=$needPictureH*$checkSizeW;
$pic = CFile::ResizeImageGet($skuPicture, array('width'=>$needPictureW, 'height'=>$skuPictureH), BX_RESIZE_IMAGE_PROPORTIONAL, true);
}
?>
<div class="more-photo"><img src='<?=$pic['src']?>' alt="Название товара"></div>
.more-photo {
display:inline-block;
overflow:hidden;
width: 54px;
height: 54px;
}
Т.е. изображение получается прямоугольным, масштабируется по меньшей стороне пропорционально, а потом средствами css показывается часть нужного размера, т.к. превьюшки небольшие, решил не тратить время на полноценный crop.
Есть замечания по данному способу ?