jQuery는 이미지 업로드 및 자르기 플러그인 Croppie_jquery를 구현합니다.

많은 애플리케이션에서는 로컬 이미지를 업로드한 다음 웹사이트의 이미지 크기 요구 사항에 맞게 적절하게 잘라야 합니다. 가장 일반적인 것은 각 사용자 시스템에서 사용자가 아바타를 업로드하고 자르도록 요구하는 애플리케이션입니다. 오늘은 HTML5와 jQuery를 기반으로 한 이미지 업로드 및 자르기 플러그인인 Croppie를 소개하겠습니다.

작업 렌더링:

HTML
먼저 관련 js 및 css 파일을 헤드에 로드합니다.

<script src="jquery.min.js"></script> 
<script src="croppie.min.js"></script> 
<link rel="stylesheet" href="croppie.css"> 

다음으로 페이지에 이미지 업로드 버튼을 배치합니다. CSS를 사용하여 type="file"의 파일 선택 컨트롤을 버튼 스타일로 변환할 수 있습니다. 이미지를 선택한 후 이미지를 업로드하고 #upload-demo에서 자르기 플러그인 Croppie를 호출하세요. #result는 자른 이미지를 표시하는 데 사용됩니다.

<div class="actions"> 
  <button class="file-btn"> 
    <span>上传</span> 
    <input type="file" id="upload" value="选择图片文件" /> 
  </button> 
  <div class="crop"> 
    <div id="upload-demo"></div> 
    <button class="upload-result">裁剪</button> 
  </div> 
  <div id="result"></div> 
</div> 

CSS
다음 CSS 코드를 사용하여 파일 선택 컨트롤을 버튼 스타일로 완벽하게 변환합니다. 실제로 type="file"의 투명도를 0으로 설정한 다음 버튼과 겹칩니다. 또한 먼저 이미지 자르기 영역 .crop을 보이지 않게 설정한 다음 파일을 선택한 후 표시합니다.

button, 
a.btn { 
  background-color: #189094; 
  color: white; 
  padding: 10px 15px; 
  border-radius: 3px; 
  border: 1px solid rgba(255, 255, 255, 0.5); 
  font-size: 16px; 
  cursor: pointer; 
  text-decoration: none; 
  text-shadow: none; 
} 
button:focus { 
  outline: 0; 
} 
 
.file-btn { 
  position: relative; 
} 
.file-btn input[type="file"] { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  opacity: 0; 
} 
 
.actions { 
  padding: 5px 0; 
} 
.actions button { 
  margin-right: 5px; 
} 
.crop{display:none} 

jQuery
먼저 HTML5의 FileReader API를 사용하여 로컬 파일을 읽은 후 $('#upload-demo').croppie()가 Croppie 플러그인을 호출합니다. Croppie의 옵션 뷰포트: 잘린 이미지의 너비와 높이뿐만 아니라 유형(원형 또는 사각형)도 설정할 수 있습니다. 옵션 경계는 이미지의 주변 크기입니다. 또한 mouseWheelZoom: 이미지의 마우스 휠 확대/축소 지원 여부, showZoom: 확대/축소 막대 도구 표시 여부, 업데이트: 콜백 함수가 있습니다.

$(function(){ 
  var $uploadCrop; 
 
    function readFile(input) { 
       if (input.files && input.files[0]) { 
        var reader = new FileReader(); 
         
        reader.onload = function (e) { 
          $uploadCrop.croppie('bind', { 
            url: e.target.result 
          }); 
        } 
         
        reader.readAsDataURL(input.files[0]); 
      } 
      else { 
        alert("Sorry - you're browser doesn't support the FileReader API"); 
      } 
    } 
 
    $uploadCrop = $('#upload-demo').croppie({ 
      viewport: { 
        width: 200, 
        height: 200, 
        type: 'circle' 
      }, 
      boundary: { 
        width: 300, 
        height: 300 
      } 
    }); 
 
    $('#upload').on('change', function () { 
      $(".crop").show(); 
      readFile(this); 
    }); 
    $('.upload-result').on('click', function (ev) { 
      $uploadCrop.croppie('result', 'canvas').then(function (resp) { 
        popupResult({ 
          src: resp 
        }); 
      }); 
    }); 
     
  function popupResult(result) { 
    var html; 
    if (result.html) { 
      html = result.html; 
    } 
    if (result.src) { 
      html = '<img src="' + result.src + '" />'; 
    } 
    $("#result").html(html); 
  } 
}); 

"자르기" 버튼을 클릭한 후 Croppie의 결과 메소드를 다시 호출하여 잘린 사진을 반환하고 #result에 표시합니다.

이상은 이미지 업로드 및 크롭을 구현하는 jQuery의 주요 프로세스입니다. 이미지 업로드 및 크롭 기술을 배우는 모든 분들에게 도움이 되길 바랍니다.