IIS 에서 얼굴인식으로 어색하지 않은 썸네일 생성

http://imageresizing.net/ 으로 썸네일을 만들면

세로 사진에서 사람 얼굴이 위쪽에 들어있거나 아래에 있을 경우
기본값으로 mode=crop 주면 중간을 기준으로 잘라내서 얼굴없는 귀신 사진을 만들어 내는데
이런 메뉴얼적인 자동 이미지 자르기는 한국의 여러 클라이언트들이 싫어한다.

face detection (안면인식)을 통해서
썸네일을 만드는 플러그인이 위의 ImageResizer에도 존재하지만

Elite 에디션에서 가능한데,
가격이 무려...한화로 9천만원이 넘는다는...

무시무시한 사용금액을 우회할 수 있는 방법이 뭐가 있을까?
(PHP는 방법이 많지만...)

구글링 끝에 관련된 Server-side 가능한 썸네일 유틸리티를 발견하였는데
결국 저 위의 ImageResizer와 같은 셋팅과 방법으로 돌아가는 사촌지간.

Eksponent CropUp

http://cropup.codeplex.com/
에서 다운받고 나오는 *.dll 들을 모두
사이트 Root/bin 폴더에 넣어줍니다.

사이트 Root/web.config 파일을 텍스트 편집기로 열고 아래와 같이 추가/편집.

 (<configSections>) (you've got that already) 
        <section name="cropUp" type="Eksponent.CropUp.Config.CropUpSection, Eksponent.CropUp"/>

     ...
    (</configSections>)

     <cropUp referenceWidth="620" referenceHeight="480">
        <roots>
            <add name="media" value="~/media"></add>
            <add name="default" value="~/Content"></add>
        </roots>
        <croppings>
            <add alias="thumb" name="Thumbnail" width="100" height="100" />
            <add alias="portrait" name="Portrait" width="320" height="400" />
            <add alias="banner" name="Banner" width="620" height="140" />
        </croppings>
     </cropUp>

IIS6 와 Cassini (Visual Studio's default F5/run web server for web projects) 에서는

(<web.config>)
  (<httpModules>)
     <add name="CropUpModule" type="Eksponent.CropUp.CropUpModule, Eksponent.CropUp"/>

IIS7 와 IIS7 Express 에서는

(<system.webServer>)
 (<modules>)
   <add name="CropUpModule" type="Eksponent.CropUp.CropUpModule, Eksponent.CropUp"/>

셋팅 파일의 저장이 완료되면 (웹 서비스의 리부팅 없이) 바로 적용됩니다.

사용법은 ImageResizer와 비슷합니다.

쿼리스트링 기본 사용 예)

*.jpg?mode=crop-up&width=100&height=60

쿼리스트링 ashx 매핑 사용 예)

*.jpg.ashx?mode=crop-up&width=100&height=60

---

아래는 원문입니다.

v1.0β is ready, but documentation needs to to updated.
A demo is available at http://cropup.test.eksponent.com/

While waiting for the documentation have a look at the source of the demo project.

The new version is made as an plugin for ImageResizer.NET.
To enable it add this to your resizer configuation in web.config

  <resizer>
    <plugins>
      <add name="CropUpUrls" type="Eksponent.CropUp.Plugins.CleanUrls"></add>
      <add name="Eksponent.CropUp.Plugins.ImageResizerPlugin" ></add>
    </plugins>
  </resizer>

The new version is backwards compatible, however you need to remove the Eksponent.CropUpModule from your web.config if you added it with the previous version.

Another important feature is that the algorithm is also available entirely client side with a JavaScript implementation. This is especially useful for responsive web designs.

You don't need the "CropUpUrls" module. It only makes your URLS nicer




THE BELOW APPLIES TO THE OLD VERSION

This project is so far a nicely looking, user-friendly data type for Umbraco, powered by a HttpModule that wraps ImageResizer.NET, covered with CropUp-algorithm awesome sauce.




This is the interface. You can drag the red "focus dot" around and highlight an important area of the image. 
If you need something in the size 100x100 it will crop until it meets the highlight area. Then it will start scaling down. If a highlight area is not specified it will scale down but ensure that the "focus dot" is shown proportionally to its location



This is the difference between weighted autocropping and normal autocropping.



When you need a URL for an image you use CropUpModule.GetImageUrl(path, args).
Example:

<img src="CropUpModule.GetImageUrl("~/media/322/puppy.jpg", new ImageSizeArguments { Width = 300, Height = 300})" />

If you need a specific named cropping (as defined in web.config) that the user may have overriden you go:

  CropUpModule.GetImageUrl("~/media/322/puppy.jpg", new ImageSizeArguments {CropAlias = "thumb"})

This requires a reference to the Eksponent.CropUp.dll assembly. You have that in your bin directory as it's part of the package.

You can use it in your Umbraco installation by following these steps:

Installation instructions

1) Download binaries and put them in ~/bin.

2) Goto Developer->Data Types, right click and then "Create". Pick "Eksponent CropUp" and hit "save".

3) Leave the pre-filled value of "umbracoFile" and hit "save" again.

4) Goto Settings->Media Types->Image and add an property that uses the data type.

5) Edit your web.config and add this

    (<configSections>) (you've got that already) 
        <section name="cropUp" type="Eksponent.CropUp.Config.CropUpSection, Eksponent.CropUp"/>

     ...
    (</configSections>)

     <cropUp referenceWidth="620" referenceHeight="480">
        <roots>
            <add name="media" value="~/media"></add>
            <add name="default" value="~/Content"></add>
        </roots>
        <croppings>
            <add alias="thumb" name="Thumbnail" width="100" height="100" />
            <add alias="portrait" name="Portrait" width="320" height="400" />
            <add alias="banner" name="Banner" width="620" height="140" />
        </croppings>
     </cropUp>

6) Keep editing your web.config file and add this HttpModule:

For IIS6 and Cassini (Visual Studio's default F5/run web server for web projects)

(<web.config>)
  (<httpModules>)
     <add name="CropUpModule" type="Eksponent.CropUp.CropUpModule, Eksponent.CropUp"/>

For IIS7 and IIS7 Express

(<system.webServer>)
 (<modules>)
   <add name="CropUpModule" type="Eksponent.CropUp.CropUpModule, Eksponent.CropUp"/>

7) Create an image and start CropUp'ing.

Last edited Jul 20, 2012 at 7:52 AM by nielskuhnel, version 12