[해피CGI][cgimall] 인라인 이미지 Crop/Resize/Zoom/Pan 플러그인 - mosaico-cropper

mosaico-cropper는 사용자 친화적이고 터치가 가능한 인라인 이미지 자르기 도구로, 백엔드 처리를 지원하여 이미지를 자르고, 크기를 조절하고, 확대/축소하고, 이동할 수 있습니다.

 

이미지를 클릭하여 편집 모드를 시작한 다음 확인 아이콘을 클릭하여 변경 사항을 저장합니다. jQuery, jQuery UI , Font Awesome, jQuery UI Touch Punch 로 제작되었습니다 .

# 라이센스 : MIT 



# 사용방법 

1. 라이브러리 호출 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

<link rel="stylesheet" href="dist/jqueryui-mosaico-cropper.min.css">

<script src="dist/jqueryui-mosaico-cropper.min.js"></script>

2., 마크업 생성

<img class="example" src="images/Kimgoen.png">

3. 이미지 지목하여 함수 호출

<script>

$('.example').on("click", function(e) {

    $(e.target).mosaicoCropper({

    });

});

</script>

# 안타까운 점 

데모 페이지는 잘 작동합니다.
하지만 이를 가져가서 사이트 적용하기 위해서는 난이도가 조금 있습니다.