티스토리 뷰

이미지 썸네일 생성을 위해서 Classic ASP 에서는 COM API 를 이용해야만 했었다.

이미지 썸네일 컴포넌트인 cxImage.dll 등을
%windir%\system32 등에 복사하고
regsvr32 로 등록하고
소스에서 server.createobject("cximage...") 생성하여 사용...

여러 이미지 썸네일 생성용 컴포넌트들을 사용하다가
퀄리티 옵션을 최고로 줬음에도 불구하고
저질의 썸네일이 생성되어버리는 상황이 닥쳤고
대안을 찾아봤다.

그 대안으로 ImageResizer 를 발견했다.

간단 요약 먼저 하자면

설치 = DLL 파일들 복사 후 web.config 셋팅 잡아주면 끝
사용 =  xxx.jpg?w=100&h=100&mode=crop

너무 간단한 설치와 사용법,
기본적인 기능들에 대한 License는 open-source 정책(새창).


다운받기

http://imageresizing.net/download 에서

이메일을 입력하고 바로 옆의 버튼을 눌러 다운받던지
그 아래 [Download Vx.x.x source, binaries, plugins, and sample code] 를 다운받던지...

선택하여 받는다.


설치법

특별한 경우가 아니면 http://imageresizing.net/docs/install 페이지의
Standard Installation Methods 중 Manual installation Guide 를 따라 설치하면 된다.

  1. 다운받은 압축파일을 해제하고 \Samples\BasicIISSite\bin 폴더를 탐색기로 오픈.
  2. ImageResizer.dll, ImageResizer.Mvc.dll, ImageResizer.Plugins.DiskCache.dll
    과 같은 주요 파일들과 plugin dll 파일들을 취사 선택하여
    웹사이트 루트 /bin 폴더에 복사해주기.
  3. 웹사이트 루트의 /Web.Config 파일을 텍스트 편집기로 열고
    다운받은 압축 해제 경로 중 \Samples\BasicIISSite\Web.config 참고하여
    항목을 추가 편집.
  4. Windows 2003 Server 의 경우
    시작 > 실행 > inetmgr > IIS 관리 > 웹 서비스 확장 > ASP.NET [허용됨]
    으로 모두 설정
  5. IIS 관리에서 디렉터리 실행권한은 '스크립트' 권한이 주어져 있으면 된다.
  6. 웹브라우저를 열고 아무 이미지나 아래와 같이 호출하여 본다.
    IIS 7 이상http://자신의도메인/xxx.jpg?w=100
    IIS 6 이하는 http://자신의도메인/xxx.jpg.ashx?w=100
  7. 이미지 가로가 100 픽셀로 줄어서 나오면 셋팅 끝.


사용법

기본적인 사용법은 http://imageresizing.net/docs/basics 에 있다.
(아래는 그 페이지의 캡춰이며 클릭하면 크게 보입니다.)


레퍼런스


프레임이나 페이지 선택

  • frame=x – 동적 GIF 프레임 중 보여줄 프레임 선택.
  • page=x– 다중 페이지 TIFF 문서 중 보여줄 페이지 선택.

회전 & 뒤집기

  • autorotate=true 카메라 EXIF 정보 기반으로 자동 회전. (AutoRotate plugin 요구됨)
  • sflip=none|x|y|xy Flips the source image prior to processing
  • srotate=0|90|180|270 Rotates the source image prior to processing (only 90 degree intervals)
  • rotate=degrees – Rotates the image any arbitrary angle (잘나낸 이후 발생)
  • flip=none|x|y|xy - Flips the image after everything is done

수동적 잘라내기

  • crop=(x1,y1,x2,y2) – Crop the image to the specified rectangle on the source image. You can use negative coordinates to specify bottom-right relative locations.
  • cropxunits The width the x1 and x2 coordinates are relative to. I.e, use '100' to make x1 and x2 percentages. Useful when you don't know the original image size.
  • cropyunits The height the y1 and y2 coordinates are relative to. I.e, use '100' to make y1 and y2 percentages. Useful when you don't know the original image size.

크기조절 (그리고 내부 여백주기, 자동 잘라내기, 조합하기 늘이기)

Please note that width/height/maxwidth/maxheight do NOT include border, margin, or padding widths, and do not include the extra space used by rotation. They constrain the image, not the canvas.

  • maxwidth, maxheight – 특정 한계치 내에 이미지 맞추기, 면 비율 보존.
  • width, height – 확실한 치수에 넓이/또는 높이를 강제로 맞춤. 면 비율이 다르다면 여백 추가됨.
  • mode=max|pad|crop|carve|stretch - 이미지와 넓이+높이간 면 비율 충돌 다루는법. 'pad' 여백추가, 'crop' 최소로 잘라내기, 'carve' 이음새 조합하기, 'stretch' 면 비율 무시하고 이미지 늘이기. 'max' maxwidth/maxheight 와 같은 행동.
  • anchor=topleft|topcenter|topright|middleleft|middlecenter|middleright|bottomleft|bottomcenter|bottomright 여백주거나 잘라낼때 이미지 기준점.
  • scale=both|upscaleonly|downscaleonly|upscalecanvas – 기본적으로, 이미지들은 절대 크게 키워지지 않는다. 이미지 크기 키울때 넓이 높이가 유사하다면 &scale=both 사용.
  • zoom=0..infinity - 배수(곱셈)로 이미지가 크기조절됨. 모바일 기기와 모든 넓이/높이/절삭 설정 유지가 필요하지만 결과의 크기를 높이거나 낮춰야 하는 상황에 유용. 기본값은 1. 0.5는 절반 크기의 이미지를, 2는 두배 크기의 이미지를 만들어냄.

테두리, 안쪽 여백, 바깥 여백, 배경색

  • bgcolor=color name | hex code (6-char). 배경/여백 색상 설정.
  • paddingWidth=px & paddingColor=color|hex paddingColor defaults to bgcolor, 기본은 흰색.
  • borderWidth=px, borderColor=color|hex
  • margin=3 or margin=5,5,10,10 특별히 4방위 외부 여백 넓이 지정.

출력 형식

  • format=jpg|png|gif - 출력 형식
  • quality - Jpeg 압축률: 0-100 100=좋음, 90=매우 좋음, 0=나쁨
  • colors=2-255 – PNG와 GIF 팔레트 크기 조정. 생략시, PNG들은 24-bit. (PrettyGifs plugin 요구됨)

기타

  • ignoreicc - true|false. true면 소스 이미지에 끼워넣어지는 ICC 프로필 무시됨.
  • cache - always|no|default - always는 크기조정 모듈에 의해 수정되지 않았더라도 이미지는 캐시됨. 수정되었을대 캐시불가되지 않게.
  • process - always|no|default - Always는 수정되지 않았더라도 강제로 이미지 재인코딩되게. 수정되었던것으로부터 이미지 유지하지 않음.
  • dpi=90|300|600 - 인쇄되어야할 시점의 DPI. 모든 브라우저, 대개의 운영체제, 대개의 프린터에서 무시됨.

Watermark plugin

  • watermark - The name of one or more watermark layers (or layer groups) to render.

Image404 plugin

  • 404 - The path to the fallback image, or a named preset

Gradient plugin

  • color1,color2 - 6 or 8 digit hex values specifying the start and end gradient colors.
  • angle - 0 is horizontal. Degrees to rotate the gradient
  • width/height - the size of the gradient image

PrettyGifs plugin

  • colors - 2 to 256 (the number of colors to allow in the output image palette). For Gifs and 8-bit PNGs.
  • dither=true|false|4pass|30|50|79|[percentage] - How much to dither

SimpleFilters plugin

  • &s.grayscale=true|y|ry|ntsc|bt709|flat (true, ntsc, and y produce identical results)
  • &s.sepia=true
  • &s.alpha= 0..1
  • &s.brightness=-1..1
  • &s.contrast=-1..1
  • &s.saturation=-1..1
  • &s.invert=true

AdvancedFilters plugin

  • &a.blur=radius - Gaussian blur with adjustable radius:
  • &a.sharpen=radius - Gaussian sharpen with adjustable radius
  • &a.contrast=-1..1
  • &a.saturation=-1..1
  • &a.brightness=-1..1
  • &a.equalize=true - Adjusts contrast, saturation, and brightness with curves based on the histogram. Good for adjusting slightly foggy or dark daytime photos.
  • &a.sepia=true - Sepia effect, slightly different from the one in SimpleFilters
  • &a.oilpainting=1..100 -Try 1 for impressionist, 100 for modern art ;)
  • &a.removenoise=1-100 - Not a blur effect - designed to remove color noise, 'pepper noise'. Very conservative, doesn't affect edges.

DropShadow plugin

  • shadowWidth - width of the shadow
  • shadowOffset - (x,y) how to offset the drop shadow
  • shadowColor - named or hex color of the shadow

SpeedOrQuality plugin

  • speed=0..5 - The amount of quality to sacrifice for speed - each value uses different settings and techniques, and may not support all features.

Presets plugin

  • preset=name1,name2,name3 - A list of preset settings groups to apply.

WhitespaceTrimmer plugin

  • trim.threshold=80 - The threshold to use for trimming whitespace
  • trim.percentpadding=0.5 - The percentage of padding to restore after trimming

WicBuilder & FreeImageBuilder

  • builder=freeimage|wic - Enables the FreeImage or Wic pipeline instead of the default GDI pipeline. Special effect plugins not supported.

FreeImageDecoder, WicDecoder

These act as fallback decoders, but you can tell them to try first by using

  • decoder=wic|freeimage

FreeImageEncoder, WicEncoder

In addition to jpeg quality and gif/png colors, you can configure the jpeg subsampling for both Wic and FreeImage.

  • subsampling==444|422|420


http://imageresizing.net/docs/benefits/comprehensive 에 확장 기능들이 나오는데
이 기능 구현 가능한 플러그인들을 쓰려면 해당 에디션을 구입해야 한다.

댓글