Изменение размера изображения в php только для просмотра - PullRequest
Новая
       79

Изменение размера изображения в php только для просмотра

5 голосов
/ 06 марта 2012

Хорошо, я написал это потому, что не знал, что искать. Я постараюсь объяснить это как можно яснее.

Скажем, у меня есть изображение размером 800x600. Ящик, выделенный для изображения, имеет размер 150x150 и должен быть всегда удовлетворен. Я могу разрешить показ только изображения с максимальным размером 150 пикселей по высоте и ширине. Таким образом, технически, изображение должно быть уменьшено до 200x150.

Теперь вопрос :

Можно ли обрезать высоту, чтобы она показала только 150x150? Это только для просмотра. Мне не нужно сохранять изображение как новый файл.

Хорошим примером является страница вашего профиля в Twitter. Он показывает изображение вашего профиля обрезанным, но когда вы нажимаете на него, вы все равно получаете изображение, которое вы изначально загрузили.

[EDIT] Вот чего я пытаюсь достичь. Получите меньшую сторону с точки зрения пикселей, измените ее размер до 150px, затем скройте переполненную часть другой стороны. Опять же, нет сбережений. Просто для удовольствия людей.

What I'm trying to accomplish

Ответы [ 15 ]

0 голосов
/ 16 марта 2012

Посмотрите на WideImage, PHP-библиотеку с открытым исходным кодом для работы с изображениями. Может быть простой как 

WideImage::load('pic.jpg')->resize(150, 150, 'outside')->output('jpg');

http://wideimage.sourceforge.net/

0 голосов
/ 15 марта 2012

вы можете сделать это с помощью jquery.я предполагаю, что у вас есть имя класса для изображений, которые вы хотите показать обрезанными.например, это может быть ".cropmyimage", вот код: 

var objheight = 150;
var objwidth = 150;
$(".cropmyimage").each(function(){      
    var elem = $(this);
    elem.wrap("<div class='cropperdiv'></div>");
    var t = new Image();        
    t.src = elem.attr("src");
    t.onload = function(){      
        var ratio1 = objwidth/objheight; 
        var ratio2 = t.width/t.height;          
        var newheight=0;
        var newwidth=0;
        if(ratio1 < ratio2){
            newheight = parseInt(objheight);
            newwidth = parseInt(objheight * ratio2);                        
        }else{
            newheight = parseInt(objwidth / ratio2);
            newwidth = "width",objwidth;        
        }                   
        elem.width(newwidth).height(newheight).css("margin-left",(objwidth-newwidth)/2).css("margin-top",(objheight-newheight)/2);          
    }
    elem.parent("div.cropperdiv").css("overflow","hidden").width(objwidth).height(objheight);
});
0 голосов
/ 13 марта 2012

Как уже упоминалось, это можно сделать с помощью CSS, если вы не сохраняете изображение. Хотя время загрузки будет снижено (загрузка изображения размером 800x600 по сравнению с загрузкой изображения 150x150).

HTML: 

<div class="imgHold">
     <img src="imgSrc.jpg" />
</div>

CSS: 

div{
     overflow:hidden;
}
img{
    width:150px;
    height:200px;
    margin-top:-25px;
}
0 голосов
/ 12 марта 2012

У меня есть сценарий оболочки , который делает именно то, что вам нужно с ImageMagick : 

#!/bin/sh
SOURCE='/path/to/img'
FILE='myfile.jpg'

convert $SOURCE/$FILE -thumbnail 150x150^\> -quality 85% \
        -gravity center -extent 150x150 ${SOURCE}150/$FILE
  • Это размер коробки 150х150- ^ после 150x150 имеет важное значение!
  • Опция -thumbnail удаляет всю метаинформацию, кроме цветовых профилей, и очень быстрая.
  • Затем она обрезает поле с 150x150 от центра (-gravity center -extent 150x150) - именно то, что выхочу.
  • Кроме того, я установил -quality 85%, который должен быть достаточным при уменьшении размера файла.
  • В этом примере я беру изображение из каталога img и пишу эскиз с тем же самымимя файла в каталоге img150 рядом с ним.

Эксперимент для достижения наилучших результатов.

Мне помогли:
http://www.imagemagick.org/Usage/files/
http://www.imagemagick.org/Usage/resize/
http://www.imagemagick.org/script/command-line-options.php#thumbnail

0 голосов
/ 06 марта 2012

просто используйте <img src='source' width="150" height="150" /> это изменит размер изображения. хотя это не будет предпочтительным, потому что это вызывает нагрузку на браузер.

Страница:
...