윤Front-End2011. 6. 30. 02:42
웹개발을 하다 보면 썸네일 만들기를 한번쯤은 해본다고 생각한다.

음.. 사실 썸네일을 제작하는건.. 쉽다... 인터넷에 널리고 널린게 썸네일 만들기 소스 일지도 .. 

 
껀수가 장난 아니게 많타..

그런데.. 문제는..
썸네일을 만들었을 때 얼마나 원본 이미지에서 전달하고 싶은 내용을 잘 살리느냐의 문제..

고정크기로 만든다던가.. 특정 비율에 의해서 만들다보면.. crop을 하기 마련인데..
이때.. crop되는 부분을 어디서 짜르냐의 문제이다..

솔직히 가로 사진의 경우는 크게 문제가 되지 않는다..  
왠만하면 가로사진을 찍을때 중요부분을 귀퉁이에 두고 찍지는 않는단 말이지..

그런데.. 세로 사진의 경우는 좀 예매하다..
그녀석이 인물 사진인경우와 아닌경우..
생각해보니 가로 사진의 경우도 문제가 될 순 있겠네..ㅋㅋ

무튼 내가 만들어야 하는건.. 3:4 가로 비율이 중요해서..
세로 사진의 경우 매우.. 애매하다..

원래는.. 원본 이미지의 비율을 구해서.. 특정 공식에 의해서.. 정확하게.. 위 아래를 똑같이 짤랐엇는데..
그러다 보니.. 인물 사진의 경우 .. 80%이상은 얼굴이 짤리고 몸통만 나오게 된다..
이게 물론 유저 썸네일이었다면 좀 큰 문제가 있겠지만..

그냥 아티클의 특정 이미지라서 괜찮을꺼야;; 라고 방치 했었는데.. 흠..
생각해보니.. 완전.. 가운데로 짤랐을때.. 이미지의 정보를 많이 훼손하는 것 같더라.

페이스북의 프로파일 이미지의 경우는 가로 180기준으로 원본 이미지의 비율에 맞추어서 썸네일을 만든다.. (fit하는 것도 제공하긴한다..ㅋ)
보면 crop되는 부분은 하나도 없다.. 대신.. 세로 길이가 동적이다..
프로파일 이미지의 경우 이미지의 정보 훼손없이 굿샷으로 만들 수 있는 것 같다..

뭐 말이 길어졋는데.. 무튼 세로 부분을 짜르는데 있어서.. 정가운데 보단.. 4/1지점 상단으로 땡기는게 좀더 괜찮은 것 같다..
얼굴은 최소한 안짤리니..
 private function calculateSize()
  {
    if($this->oriWidth > $this->oriHeight)
    {
      $this->newHeight    = $this->oriHeight - ($this->oriHeight % $this->height);
      $this->heightOffset = ceil(($this->oriHeight % $this->height) /2);
        
      $this->newWidth = ceil(($this->newHeight * $this->width) / $this->height);
      $this->widthOffset = ceil(($this->oriWidth - $this->newWidth) /2);
    }
    elseif($this->oriHeight > $this->oriWidth)
    {
      $this->newWidth = $this->oriWidth - ($this->oriWidth % $this->width);
      $this->widthOffset = ceil(($this->oriWidth % $this->width) /2);
        
      $this->newHeight    = ceil(($this->newWidth * $this->height) / $this->width);
      $this->heightOffset = ceil(($this->oriHeight - $this->newHeight) /4);
    } 
  }

 원래 다 2로 나누었는데.. 제일 밑에 hightOffset의 경우는 4로 나누었다.. ;;

 

원본 비율
 

정가운데 crop
 

정가운데에서 좀더 위에.. crop.. 

그나마 좀 괜찮아 보인다..;;
그런데 프로파일 이미지의 경우는 상단 기준으로 밑부분을 짤라네는게 좀더.. 괜찮은 것 같기도 하다 .ㅋ  

ps. 사진에 출연한 녀석의 나의 사랑 엑수맨이다..;; 

Posted by is윤군
TAG

댓글을 달아 주세요