[jQuery] JCROP을 이용한 이미지 자르기 - Sample[jQuery] JCROP을 이용한 이미지 자르기 - Sample

Posted at 2020. 2. 11. 13:29 | Posted in JavaScript & jQuery/jQuery
반응형

 

 

 

 

Jcrop 다운 : http://deepliquid.com/content/Jcrop.html

Jcrop API : https://jcrop.com/

GitHub : https://github.com/tapmodo/Jcrop

 

 

 

 

■ JCROP을 이용한 업로드한 크롭( CROP ) 하기

 

 

 

 

웹 브라우저 상에서 이미지를 업로드하고, 해당 이미지를 편집 하는 기능을 제작하게 되었다.

 

HTML5의 캔버스를 통해 업로드한 이미지를 똑같이 복사하여, 작업영역을 만들고.

 

캔버스에서 작업이 완료된 그림을 다시 원본 이미지와 교체하는형태로 서버에 업로드 하지 않고 작업하는것을 마무리 하였다.

 

 

 

# 소스코드

<html>
<head>
<meta charset="UTF-8">
<title>:: JavaScript 캔버스 이미지 업로드 ::</title>
<meta name="viewport" content="width=device-width">
<link type="text/css" rel="stylesheet" href="./css/modern.css"/>
<link type="text/css" rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v0.9.12/css/jquery.Jcrop.min.css"/>
<style type="text/css">
    .imgArea { text-align:center; }
    canvas, #uploadFile, #editBtn, #cutBtn { display:none; }
    body { overflow:hidden };
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="http://jcrop-cdn.tapmodo.com/v0.9.12/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript">


    let jcropApi = null;


    // @breif 이미지 크롭 영역지정 UI 나타내기
    function imgCropDesignate() {


        let editWidth = jQuery("#editImg").width();
        let editHeight = jQuery("#editImg").height();
       
        // @breif jcrop 실행시 크롭영역을 미리 세팅
        let x1 = window.screen.width / 2 - editWidth;
        let y1 = window.screen.height / 2 - editHeight;
        let x2 = editWidth / 1.5;
        let y2 = editHeight / 1.5;


        // @breif jcrop 실행
        jQuery("#editImg").Jcrop({
              bgFade : true
            , bgOpacity : .2
            , setSelect : [ x1, y1, x2, y2 ]
            , onSelect : updateCoords
        }, function() {
            jcropApi = this;
        });
        
        jQuery("#editBtn").css("display", "none");
        jQuery("#cutBtn").css("display", "inline");
    }
    
    // @breif 지정된 크롭 한 영역( 좌표, 넓이, 높이 )의 값을 보관하는 함수
    function updateCoords(crap) {
        jQuery("#xAxis").val(crap.x);
        jQuery("#yAxis").val(crap.y);
        jQuery("#wLength").val(crap.w);
        jQuery("#hLength").val(crap.h);
    }


    // @breif 크롭한 영역 잘라내고 추출하기
    function imgCropApply() {


        if(parseInt(jQuery("#wLength").val()) == "NaN") {
            alert("이미지를 크롭한 이후\n자르기 버튼을 클릭하세요.");
            return false;
        } else {


            let editImage = new Image();
            editImage.src = jQuery("#editImg").attr("src");


            editImage.onload = function() {


                // @breif 캔버스 위에 이미지 그리기
                let canvas = document.querySelector("canvas");
                let canvasContext = canvas.getContext("2d");


                // @breif 캔버스 크기를 이미지 크기와 동일하게 지정
                canvas.width = jQuery("#wLength").val();
                canvas.height = jQuery("#hLength").val();
                                
                canvasContext.drawImage(
                      this
                    , jQuery("#xAxis").val()        // 자르기를 시작할 x좌표
                    , jQuery("#yAxis").val()        // 자르기를 시작할 y좌표
                    , jQuery("#wLength").val()    // 잘라낸 이미지의 넓이
                    , jQuery("#hLength").val()    // 잘라낸 이미지의 높이
                    , 0                                         // 캔버스에 이미지를 배치할 x좌표
                    , 0                                         // 캔버스에 이미지를 배치할 y좌표
                    , jQuery("#wLength").val()    // 사용할 이미지의 넓이(이미지 스트레칭 또는 축소)
                    , jQuery("#hLength").val()    // 사용할 이미지의 높이(이미지 스트레칭 또는 축소)
                );


                // @breif 편집한 캔버스의 이미지를 화면에 출력한다.
                let dataURI = canvas.toDataURL("image/jpeg");
                jQuery("#editImg").attr("src", dataURI);
                
                // @breif 이미지의 크기는 자른 이미지와 동일하게 지정
                jQuery("#editImg").css("width", jQuery("#wLength").val());
                jQuery("#editImg").css("height", jQuery("#hLength").val());
            };


            jQuery("#cutBtn").css("display", "none");


            // @details JCROP을 종료한다.
            jcropApi.destroy();
    jcropApi = null;
        }
    }


    // @breif 이미지 업로드 함수
    function uploadImgFilePrinted() {


        // @details 업로드 파일 정보를 받아온다.
        let fileInfo = document.getElementById("uploadFile").files[0];
        let reader = new FileReader();


        reader.onload = function() {


            // @details 업로드 이미지 출력
            jQuery("#editImg").attr("src", reader.result);
            
            // @details 이미지 크기를 제목 영영과 같게 출력
            jQuery("#editImg").css("width", jQuery("h1").width());
            
            // @details 이미지 업로드 기능 제거, 추가 업로드 방지
            jQuery("#editImg").parent("a").removeAttr("onClick");
            
            // @details 편집버튼 노출
            jQuery("#editBtn").css("display", "inline");
            
            canvasDrawImage(function() {
            alert("이미지 업로드가 완료되었습니다.");
            });
        };


        if(fileInfo) {     
            // @details readAsDataURL을 통해 업로드한 파일의 URL을 읽어 들인다.
            reader.readAsDataURL(fileInfo);
        }
    }


    // @breif 캔버스 이미지 생성
    function canvasDrawImage(callback) {


        let prepImage = new Image();
        prepImage.src = jQuery("#editImg").attr("src");


        prepImage.onload = function() {


            // @details 캔버스 위에 이미지 그리기
            // jQuery("canvas") 와같은 명령은 사용할 수 없다.
            let canvas = document.querySelector("canvas");
            let canvasContext = canvas.getContext("2d");


            canvas.width = jQuery("#editImg").width();
            canvas.height = jQuery("#editImg").height();
            canvasContext.drawImage(this, 0, 0, jQuery("#editImg").width(), jQuery("#editImg").height());


            // @details 캔버스의 이미지
            let dataURI = canvas.toDataURL("image/jpeg");
            jQuery("#editImg").attr("src", dataURI);
            
            callback();
        };
    }
</script>
</head>
<body>
<input type="hidden" id="xAxis" value="0" placeholder="선택영여역의_x좌표"/>
<input type="hidden" id="yAxis" value="0" placeholder="선택영여역의_y좌표"/>
<input type="hidden" id="wLength" value="0" placeholder="선택영여역의_w넓이"/>
<input type="hidden" id="hLength" value="0" placeholder="선택영여역의_h높이"/>
<input type="file" id="uploadFile" onChange="uploadImgFilePrinted();" accept="image/*"/>
<div class="contents">
    <h1>이미지&nbsp;자르기<span>샘플</span></h1>
    <div class="imgArea">
        <a href="javascript:;" onClick="jQuery('#uploadFile').click();">
            <img id="editImg" src="./user-anonymous.png"/>
        </a>
        <br/><br/>
        <input id="editBtn" type="button" onClick="imgCropDesignate();" value="편집"/>
        <input id="cutBtn" type="button" onClick="imgCropApply();" value="자르기"/>
    </div>
    <canvas></canvas>
    <div class="copyright" style="bottom:0;">
        <p>Producer &copy; 사악미소</p>
    </div>
</div>
</body>
</html> 

 

 

 

 

# 출력결과

 

 

 

 

관련포스팅#01 : [JavaScript] 이미지 파일 썸네일 생성하기

관련포스팅#02 : [JavaScript] Canvas를 통한 이미지 회전

관련포스팅#03 : [JavaScript] Canvas로 이미지 서버에 전송하기 - Sample

관련포스팅#04 : [jQuery] JCROP을 이용한 이미지 자르기 - Sample

 

 

 

 

 

반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] TextBox에서 다중 선택 기능 제작  (0) 2020.07.24
[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영  (0) 2020.03.02
[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작  (0) 2019.06.18
[jQuery] 팝업 창 외에 다른 항목 클릭 막기  (0) 2019.06.04
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기  (7) 2019.01.31
//

[JavaScript] 파일업로드시 용량 검사하기[JavaScript] 파일업로드시 용량 검사하기

Posted at 2019. 12. 26. 11:25 | Posted in JavaScript & jQuery/JavaScript
반응형



참고 : https://zzznara2.tistory.com/617




■ 파일업로드시 용량 검사하기




# 소스코드

<html>

<head>

<title>:: JAVASCRIPT 파일업로드 ::</title>

<script type="text/javascript">

    function imgFileUpload() {


        /// @brief 업로드할 이미지의 크기( Byte )를 구해온다.

        const imgSize = document.getElementById("personImg").files[0].size;


        /// @brief 업로드할 이미지 사이즈의 크기는 4MB 이하로 설정

        const maxSize = 4 * 1024 * 1024;


        /// @brief 이미지

        if(imgSize > maxSize) {


            alert("첨부할 수 있는 이미지 파일은 4MB 이하여야 합니다.");

            document.getElementById("personImg").focus();

            return false;


        } else {


            alert("업로드 가능한 이미지입니다.");


        }

    }

</script>

</head>

<body>

<form enctype="multipart/form-data" id="upFrm" method="post">

    <input type="file" id="personImg" name="personImg" value=""/>

    <input type="button" onClick="imgFileUpload();" value="업로드"/>

</form>

</body>

</html>




# 출력결과 - 수정예정






관련문서 : [JavaScript] 파일업로드시 확장자 검사하기







반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] getElementByTagName( ) 메소드  (0) 2020.02.28
[JavaScript] INPUT TYPE FILE 썸네일 생성  (0) 2020.01.16
[JavaScript] 체크박스 전체 선택 - Sample  (0) 2019.12.19
[JavaScript] 실시간 타이머(시계) 만들기  (2) 2019.12.05
[JavaScript] 전광판 효과 구현하기  (0) 2019.12.05
//

[API] Bittly API v4 연동, 단축 URL 생성하기 - PHP[API] Bittly API v4 연동, 단축 URL 생성하기 - PHP

Posted at 2019. 12. 23. 19:34 | Posted in API/Bitly
반응형




참고 : https://stackoverflow.com/questions/55681871/how-to-shorten-url-using-php-bitly-v4?answertab=active#tab-top





■ Bittly API v4 토큰 발급받기




① 먼저 Bittly 계정이 필요하다.

    가지고 있는 Bittly계정이 존재하지 않다면 https://bitly.com/a/sign_up 페이지에 접속하여 계정을 생성한다.






② 가입된 계정이 준비되었다면 https://app.bitly.com/ 페이지에 접근한다.(로그인 되어 있지 않은 상태로 접근 불가)

    자신의 계정정보가 노출되는 페이지에 접속 했다면 상단 우측의 메뉴 항목을 클릭한다.






③  자신의 계정을 클릭한다.






④ Generic Access Token 카테고리를 클릭한다.






⑤ 패스워드를 입력하고 클릭하면 화면 하단에 GENERATE TOKEN 버튼이 나타난다.

     GENERATE TOKEN 버튼을 클릭한다.





⑥ 토큰이 발급된 것을 확인 할 수 있다.









■ Bittly API v4 연동하여 짧은 URL 생성하기





PHP에서 Bittly API와 연동하여 짧은 URL을 생성해 보도록 하겠다.


PHP의 cURL을 사용하였다.




# 소스코드

<?php


/// @brief URI 값 생성

$getUri = "num=1&lang=ko";


/// @brief 접근할 URL 주소 생성

$longUrl = "http://도메인주소?".$getUri;


/// @brief  생성한 URL을 $data['long_url']에 담고 JSON 형태로 변환한다.

$data['long_url'] = $longUrl;

$payload = json_encode($data);


/// @brief BITLY API 접근 URL

$bitApi = "https://api-ssl.bitly.com/v4/bitlinks";


/// @brief 발급받은 BITLY API 토큰

$bitToken = "발급받은 API 토큰 값";


/// @brief CURL 사용

$cURL = curl_init();

curl_setopt($cURL, CURLOPT_URL, $bitApi);

curl_setopt($cURL, CURLOPT_CUSTOMREQUEST, "POST");

curl_setopt($cURL, CURLOPT_POSTFIELDS, $payload);

curl_setopt($cURL, CURLOPT_RETURNTRANSFER, TRUE);

curl_setopt($cURL, CURLOPT_HTTPHEADER, array(

  "Authorization:Bearer ".$bitToken         // Bearer { $token } (공백필수)

, "Content-Type:application/json"

, "Content-Length:".strlen($payload)

)

);


/// @brief 결과값 조회

$result = json_decode(curl_exec($cURL), TRUE);


echo "<pre>";

print_r($result);

echo "</pre>";


/// @brief 출력결과

if(isset($result['link']) == 1) {

echo $result['link'];

}

?> 




# 출력결과







반응형
저작자표시
//

[JavaScript] 체크박스 전체 선택 - Sample[JavaScript] 체크박스 전체 선택 - Sample

Posted at 2019. 12. 19. 11:34 | Posted in JavaScript & jQuery/JavaScript
반응형




■ 전체영역을 선택하는 체크박스 샘플 코드




# 소스코드

<html>

<head>

<title>:: JavaScript 체크박스 ::</title>

<script type="text/javascript">


    // @command 전체선택

    function allCheckedBox(obj) {


        // @brief 선택한 체크박스의 클래스 명칭을 가져온다.

        const termClass = obj.getAttribute("class");


        // @brief 선택한 클래스명과 같은 클래스의 갯수

        console.log(document.getElementsByClassName(termClass).length);


        Array.prototype.forEach.call(document.getElementsByClassName(termClass), function(element, index, array) {


            // @brief 엘리먼트의 값 출력

            console.log(element.value);


            // @brief 선택한 클래스의 첫번째 checkbox의 상태가 체크가 되있는 경우

            if(document.getElementsByClassName(termClass)[0].checked == true) {


                // @brief 같은 클래스명을 가진 모든 checkbox의 상태를 선택 완료 처리 한다.

                element.checked = true;

            }


            // @brief 선택한 클래스의 첫번째 checkbox의 상태가 체크가 해제된 경우

            else {


                // @brief 같은 클래스명을 가진 모든 checkbox의 상태를 선택 해제 처리 한다.

                element.checked = false;

            }

        });

    }


    // @command 개별 선택이 이루어진 경우에 전체값 체크의 예외처리

    function eachCheckedBox(obj) {


        // @brief 선택한 체크박스의 상태가 선택해제인 경우

        if(obj.checked == false) {


            // @brief 선택한 체크박스의 클래스 명칭을 가져온다.

            const termClass = obj.getAttribute("class");


            // @brief 첫번째 checkbox의 상태가 체크가 되어있는경우

            if(document.getElementsByClassName(termClass)[0].checked == true) {


                // @brief 첫번째 checkbox의 상태를 체크해제한다.

                document.getElementsByClassName(termClass)[0].checked = false;

            }

        }

    }

</script>

</head>

<body>

     <h1>■ 체크박스 전체 선택 - SAMPLE</h1>


    <!-- @brief 전체의 선택의 경우 반드시 index값이 0인 첫번째에 위치해야 한다. -->

    <label>

        <input type="checkbox" class="neHeros" value="" onChange="allCheckedBox(this);"/>&nbsp;전체

    </label>


    <!-- @brief 개별선택될 체크박스들 -->

    <label>

        <input type="checkbox" class="neHeros" value="D" onChange="eachCheckedBox(this);"/>&nbsp;데몬헌터

    </label>

    <label>

        <input type="checkbox" class="neHeros" value="W" onChange="eachCheckedBox(this);"/>&nbsp;워든

    </label>

    <label>

        <input type="checkbox" class="neHeros" value="K" onChange="eachCheckedBox(this);"/>&nbsp;키퍼 오브 더 그루브

    </label>

    <label>

        <input type="checkbox" class="neHeros" value="P" onChange="eachCheckedBox(this);"/>&nbsp;프리시스 오브 더 문

    </label>

</body>

</html>




# 출력결과







반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] INPUT TYPE FILE 썸네일 생성  (0) 2020.01.16
[JavaScript] 파일업로드시 용량 검사하기  (0) 2019.12.26
[JavaScript] 실시간 타이머(시계) 만들기  (2) 2019.12.05
[JavaScript] 전광판 효과 구현하기  (0) 2019.12.05
[JavaScript] AJAX 통신 정리  (0) 2019.11.17
//

티스토리툴바