Cropper.js 그림 재단 및 업로드(PC 엔 드)

22885 단어 cropper.js업로드
이전에 프로젝트 를 할 때 필요 한 것 은 이미지 재단 을 실현 하여 두상 을 만 들 고 서버 에 올 려 야 하기 때문에 인터넷 에서 많은 자 료 를 조회 하고 많은 사례 를 사용 해 보 았 습 니 다.cropper 플러그 인 재단 이 비교적 완선 한 것 을 발 견 했 기 때문에 이전의 사용 상황 과 결합 하여 이 사례 를 작 성 했 습 니 다.본 사례 는 참고cropper 사이트 인 스 턴 스수정 간소화.
option 관련 매개 변수 설명:
viewMode 디 스 플레이 모드
Type: Number
Default: 0
Options:
0:the crop box is just within the container 재단 상 자 는 1 에서 만 이동 할 수 있 습 니 다.
1:the crop box should be within the canvas 재단 상 자 는 2 그림 에서 만 이동 할 수 있 습 니 다.
2:the canvas should not be within the container
3:the container should be within the canvas
드래그 모드 드래그 모드
Default: ‘crop'
Options:
'crop':create a new crop box 마우스 가 한 곳 을 클릭 할 때 이 점 에 따라 재단 상 자 를 다시 만 듭 니 다.
'move':move the canvas 는 그림 을 끌 수 있 습 니 다.
'none':do nothing 그림 은 끌 수 없습니다.
toggleDrag ModeOnDblclick:기본 true 입 니 다.드래그 모드 인"crop"과"move"의 전환 상 태 를 허용 할 지 여부 입 니 다.즉,crop 모드 에서 드래그 를 풀 지 않 으 면'move'모드 입 니 다.놓 으 면'crop'모드 입 니 다.
preview:캡 처 한 디 스 플레이 위치.형식:String
responsive:창 크기 가 바 뀔 때 cropper 를 초기 화 할 지 여부 입 니 다.형식:Boolean,기본 값 true.
checkImageOrigin:형식:Boolean,기본 값 true.기본적으로 플러그 인 은 그림 의 원본 을 감지 합 니 다.크로스 필드 그림 이 라면 그림 요 소 는 crossOriginclass 를 추가 하고 그림 의 url 에 시간 스탬프 를 추가 하여 getCroppedCanvas 를 사용 할 수 있 도록 합 니 다.타임 스탬프 를 추가 하면 그림 을 다시 불 러 옵 니 다.크로스 필드 그림 이 getCroppedCanvas 를 사용 할 수 있 도록 합 니 다.그림 에 crossOriginclass 를 추가 하면 그림 url 에 시간 스탬프 를 추가 하고 그림 의 재 불 러 오 는 것 을 막 을 수 있 습 니 다.
background:형식:Boolean,기본 값 true.용기 에 격자 배경 을 표시 할 지 여부 입 니 다.배경 을 바 꾸 려 면 cropper.css 스타일 의 cropper-bg 를 직접 바 꾸 십시오.
canvas 관련
movable:형식:Boolean,기본 값 true.그림 이동 허용 여부
rotatable:형식:Boolean,기본 값 true.그림 회전 을 허용 할 지 여부 입 니 다.
scalable:기본 트 루.그림 확장 을 허용 할 지 여부 입 니 다.(잠시 무엇 에 쓰 는 지 모르겠다)
zoomable:기본 트 루,돌 은 그림 크기 를 조정 할 수 있 습 니 다.
zoomOnWheel:기본 true 에서 마우스 롤러 크기 조정 을 허용 할 지 여부
zoomOnTouch:기본 true 에서 그림 크기 조정 을 허용 할 지 여부 입 니 다.(터치 스크린 의 두 손가락 동작)
wheelZoomRatio:기본 0.1 사표 롤러 축소 그림 비율 입 니 다.당장 꺼 져.그림 크기 조정 이 얼마나 됩 니까?0.1 이면 그림 의 10%입 니 다.
crop(재단 상자)관련
aspectRatio 재단 상자 비율 기본 NaN
예 를 들 어:1/1,//재단 상자 비율 1:1
modal:형식:Boolean,기본 값 true.커팅 상자 에 검은색 모드 창 을 표시 할 지 여부 입 니 다.
cropBoxMovable:기본 true,재단 상 자 를 드래그 할 수 있 는 지 여부
cropBoxResizable:기본 true,/드래그 해서 재단 상자 크기 를 변경 할 수 있 는 지 여부
autoCrop:형식:Boolean,기본 값 true.초기 화 할 때 자동 으로 재단 상자 가 나타 날 수 있 는 지 여부 입 니 다.
autoCropArea:형식:Number,기본 값 0.8(그림 의 80%).0-1 사이 의 수 치 는 자동 커팅 상자 의 크기 를 정의 합 니 다.
highlight:형식:Boolean,기본 값 true.커팅 상자 에 흰색 모드 창 을 표시 할 지 여부 입 니 다.
guides:형식:Boolean,기본 값 true.커팅 상자 에 점선 을 보일 지 여부 입 니 다.
center:기본 true 재단 상자 가운데+restore 를 표시 할 지 여부:형식:Boolean,기본 값 true 를 표시 할 지 여부
창 크기 를 조정 한 후 재단 영역 을 복원 합 니 다.
크기 상관
minContainer Width:형식:Number,기본 값 200.용기 의 최소 너비.
minContainer Height:형식:Number,기본 값 100.용기 의 최소 높이.
minCanvasWidth:형식:Number,기본 값 0.canvas 의 최소 너비(image wrapper).
minCanvas Height:형식:Number,기본 값 0.canvas 의 최소 높이(image wrapper).
감청 트리거 방법
build:형식:Function,기본 값 null.build.cropper
사건 의 약자 방식.컨트롤 초기 화 전 실행
build:형식:Function,기본 값 null.built.cropper
이벤트 의 약자 방식.공간 초기 화 완료 후 실행
dragstart:형식:Function,기본 값 null.dragstart.cropper
이벤트 의 약자 방식.드래그 하여 실행 시작
dragmove:형식:Function,기본 값 null.dragmove.cropper
이벤트 의 약자 방식.드래그 이동 중 실행
dragend:형식:Function,기본 값 null.dragend.cropper
이벤트 의 약자 방식.드래그 끝 실행
zoomin:형식:Function,기본 값 null.zoomin.cropper
이벤트 의 약자 방식.축소 집행
zoomout:형식:Function,기본 값 null.zoomout.cropper
이벤트 의 약자 방식.확대 실행
index.html 코드 는 다음 과 같 습 니 다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="external nofollow" >
 <link rel="stylesheet" href="css/cropper.css" rel="external nofollow" >
 <link rel="stylesheet" href="css/main.css" rel="external nofollow" >
 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
</head>
<body>
 <!--[if lt IE 8]>
 <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" rel="external nofollow" >upgrade your browser</a> to improve your experience.</p>
 <![endif]-->
 <!-- Content -->
 <div class="container" style="margin-top:50px;">
 <div class="row">
 <div class="col-md-9">
 <!-- <h3>Demo:</h3> -->
 <div class="img-container">
  ![](images/picture.jpg)
 </div>
 </div>
 <div class="col-md-3">
 <!-- <h3>Preview:</h3> -->
 <div class="docs-preview clearfix">
  <div class="img-preview preview-lg"></div>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="col-md-9 docs-buttons">
 <!-- <h3>Toolbar:</h3> -->
 <div class="btn-group">
  <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
  <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("zoom", 0.1)">
    
  </span>
  </button>
  <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
  <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("zoom", -0.1)">
    
  </span>
  </button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left">
  <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("move", -10, 0)">
    
  </span>
  </button>
  <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right">
  <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("move", 10, 0)">
    
  </span>
  </button>
  <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up">
  <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("move", 0, -10)">
    
  </span>
  </button>
  <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down">
  <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("move", 0, 10)">
    
  </span>
  </button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-primary" data-method="rotate" data-option="-90" title="Rotate Left">
  <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("rotate", -90)">
    90º
  </span>
  </button>
  <button type="button" class="btn btn-primary" data-method="rotate" data-option="90" title="Rotate Right">
  <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("rotate", 90)">
    90º
  </span>
  </button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-primary" data-method="reset" title="Reset">
  <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("reset")">
    
  </span>
  </button>
  <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
  <input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
  <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="Import image with Blob URLs">
      
  </span>
  </label>
 </div>
 <div class="btn-group btn-group-crop">
  <button class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 180, "height": 90 }" type="button">
      
  </button>
 </div>
 <!-- Show the cropped image in modal -->
 <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
  <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-header">
  <h5 class="modal-title" id="getCroppedCanvasTitle">Cropped</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
   <span aria-hidden="true">×</span>
  </button>
  </div>
  <div class="modal-body"></div>
  <div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  <a class="btn btn-primary" id="download" href="javascript:void(0);" rel="external nofollow" download="cropped.jpg">Download</a>
  </div>
  </div>
  </div>
 </div><!-- /.modal -->
 </div><!-- /.docs-buttons -->
 </div>
 <!-- Scripts -->
 <script src="js/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
 <script src="js/cropper.js"></script>
 <script src="js/main.js"></script>
</body>
</html>
cropper.js 부분 매개 변수 코드:

(function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery')) :
 typeof define === 'function' && define.amd ? define(['jquery'], factory) :
 (factory(global.$));
}(this, (function ($) { 'use strict';
$ = 'default' in $ ? $['default'] : $;
var DEFAULTS = {
 // Define the view mode of the cropper
 viewMode: 0, // 0, 1, 2, 3   
 // Define the dragging mode of the cropper
 dragMode: 'crop', // 'crop', 'move' or 'none'
 // Define the aspect ratio of the crop box
 aspectRatio: NaN,
 // An object with the previous cropping result data
 data: null,
 // A selector for adding extra containers to preview
 preview: '',
 // Re-render the cropper when resize the window
 responsive: true,
 // Restore the cropped area after resize the window
 restore: true,
 // Check if the current image is a cross-origin image
 checkCrossOrigin: true,
 // Check the current image's Exif Orientation information
 checkOrientation: true,
 // Show the black modal
 modal: true,
 // Show the dashed lines for guiding
 guides: true,
 // Show the center indicator for guiding
 center: true,
 // Show the white modal to highlight the crop box
 highlight: true,
 // Show the grid background
 background: true,
 // Enable to crop the image automatically when initialize
 autoCrop: true,
 // Define the percentage of automatic cropping area when initializes
 autoCropArea: 0.8,
 // Enable to move the image
 movable: true,
 // Enable to rotate the image
 rotatable: true,
 // Enable to scale the image
 scalable: true,
 // Enable to zoom the image
 zoomable: true,
 // Enable to zoom the image by dragging touch
 zoomOnTouch: true,
 // Enable to zoom the image by wheeling mouse
 zoomOnWheel: true,
 // Define zoom ratio when zoom the image by wheeling mouse
 wheelZoomRatio: 0.1,
 // Enable to move the crop box
 cropBoxMovable: true,
 // Enable to resize the crop box
 cropBoxResizable: true,
 // Toggle drag mode between "crop" and "move" when click twice on the cropper
 toggleDragModeOnDblclick: true,
 // Size limitation
 minCanvasWidth: 0,
 minCanvasHeight: 0,
 minCropBoxWidth: 0,
 minCropBoxHeight: 0,
 minContainerWidth: 200,
 minContainerHeight: 100,
 // Shortcuts of events
 ready: null,
 cropstart: null,
 cropmove: null,
 cropend: null,
 crop: null,
 zoom: null
};
main.js 코드 는 다음 과 같 습 니 다.

$(function () {
 'use strict';//     
 var console = window.console || { log: function () {} };
 var URL = window.URL || window.webkitURL;
 var $image = $('#image');
 var $download = $('#download');
 //         
 var $dataX = $('#dataX');
 var $dataY = $('#dataY');
 var $dataHeight = $('#dataHeight');
 var $dataWidth = $('#dataWidth');
 var $dataRotate = $('#dataRotate');
 var $dataScaleX = $('#dataScaleX');
 var $dataScaleY = $('#dataScaleY');
 var options = {
 aspectRatio: 1 / 1, //     1:1
 preview: '.img-preview',
 crop: function (e) {
  $dataX.val(Math.round(e.x));
  $dataY.val(Math.round(e.y));
  $dataHeight.val(Math.round(e.height));
  $dataWidth.val(Math.round(e.width));
  $dataRotate.val(e.rotate);
  $dataScaleX.val(e.scaleX);
  $dataScaleY.val(e.scaleY);
 }
 };
 var originalImageURL = $image.attr('src');
 var uploadedImageURL;
 // Tooltip
 $('[data-toggle="tooltip"]').tooltip();
 // Cropper
 $image.on({
 ready: function (e) {
 console.log(e.type);
 },
 cropstart: function (e) {
 console.log(e.type, e.action);
 },
 cropmove: function (e) {
 console.log(e.type, e.action);
 },
 cropend: function (e) {
 console.log(e.type, e.action);
 },
 crop: function (e) {
 console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
 },
 zoom: function (e) {
 console.log(e.type, e.ratio);
 }
 }).cropper(options);
 // Buttons
 if (!$.isFunction(document.createElement('canvas').getContext)) {
 $('button[data-method="getCroppedCanvas"]').prop('disabled', true);
 }
 if (typeof document.createElement('cropper').style.transition === 'undefined') {
 $('button[data-method="rotate"]').prop('disabled', true);
 $('button[data-method="scale"]').prop('disabled', true);
 }
 // Download
 if (typeof $download[0].download === 'undefined') {
 $download.addClass('disabled');
 }
 // Options
 $('.docs-toggles').on('change', 'input', function () {
 var $this = $(this);
 var name = $this.attr('name');
 var type = $this.prop('type');
 var cropBoxData;
 var canvasData;
 if (!$image.data('cropper')) {
 return;
 }
 if (type === 'checkbox') {
 options[name] = $this.prop('checked');
 cropBoxData = $image.cropper('getCropBoxData');
 canvasData = $image.cropper('getCanvasData');
 options.ready = function () {
 $image.cropper('setCropBoxData', cropBoxData);
 $image.cropper('setCanvasData', canvasData);
 };
 } else if (type === 'radio') {
 options[name] = $this.val();
 }
 $image.cropper('destroy').cropper(options);
 });
 // Methods
 //           ,    
 $('.docs-buttons').on('click', '[data-method]', function () {
 var $this = $(this);
 var data = $this.data();
 var $target;
 var result;
 if ($this.prop('disabled') || $this.hasClass('disabled')) {
 return;
 }
 if ($image.data('cropper') && data.method) {
 data = $.extend({}, data); // Clone a new one
 if (typeof data.target !== 'undefined') {
 $target = $(data.target);
 if (typeof data.option === 'undefined') {
  try {
  data.option = JSON.parse($target.val());
  } catch (e) {
  console.log(e.message);
  }
 }
 }
 if (data.method === 'rotate') {
 $image.cropper('clear');
 }
 result = $image.cropper(data.method, data.option, data.secondOption);
 if (data.method === 'rotate') {
 $image.cropper('crop');
 }
 switch (data.method) {
 case 'scaleX':
 case 'scaleY':
  $(this).data('option', -data.option);
  break;
 case 'getCroppedCanvas':
 //    
  if (result) {
  var imgBase=result.toDataURL('image/jpeg');
  var data={imgBase:imgBase};
  $.post('/docs/upload.php',data,function(ret){
  if(ret=='true'){
  alert('    ');
  }else{
  alert('    ');
  }
  },'text');
  }
  break;
 case 'destroy':
  if (uploadedImageURL) {
  URL.revokeObjectURL(uploadedImageURL);
  uploadedImageURL = '';
  $image.attr('src', originalImageURL);
  }
  break;
 }
 if ($.isPlainObject(result) && $target) {
 try {
  $target.val(JSON.stringify(result));
 } catch (e) {
  console.log(e.message);
 }
 }
 }
 });
 // Keyboard
 $(document.body).on('keydown', function (e) {
 if (!$image.data('cropper') || this.scrollTop > 300) {
 return;
 }
 switch (e.which) {
 case 37:
 e.preventDefault();
 $image.cropper('move', -1, 0);
 break;
 case 38:
 e.preventDefault();
 $image.cropper('move', 0, -1);
 break;
 case 39:
 e.preventDefault();
 $image.cropper('move', 1, 0);
 break;
 case 40:
 e.preventDefault();
 $image.cropper('move', 0, 1);
 break;
 }
 });
 // Import image
 var $inputImage = $('#inputImage');
 if (URL) {
 $inputImage.change(function () {
 var files = this.files;
 var file;
 if (!$image.data('cropper')) {
 return;
 }
 if (files && files.length) {
 file = files[0];
 if (/^image\/\w+$/.test(file.type)) {
  if (uploadedImageURL) {
  URL.revokeObjectURL(uploadedImageURL);
  }
  uploadedImageURL = URL.createObjectURL(file);
  $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
  $inputImage.val('');
 } else {
  window.alert('Please choose an image file.');
 }
 }
 });
 } else {
 $inputImage.prop('disabled', true).parent().addClass('disabled');
 }
});
canvas 에서 생 성 된 캡 처 변환 을 사용 하여 base 64 코드 를 생 성 합 니 다.
배경 처리 base 64 코드 세 션(PHP 서버).
upload.php 코드 는 다음 과 같 습 니 다.

<?php
 error_reporting(0);//       
 if (IS_POST) {
 header('Content-type:text/html;charset=utf-8');
 $base64_image_content = $_POST['imgBase'];
 // base64         
 if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)) {
  $type = $result[2];
  $new_file = "./uploads/";
  if (!file_exists($new_file)) {
  //         ,       ,       
  mkdir($new_file, 0700);
  }
  $img=time() . ".{$type}";
  $new_file = $new_file . $img;
  //           
  if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))) {
  echo 'true';
  }else{
  echo 'false';
  }
 }else{
  echo 'false';
 }
 }
?>
구현 효과:

캡 처 할 그림 위 치 를 선택 하고'프로필 업로드'단 추 를 누 르 면 캡 처 한 그림 을 서버 본 사이트 디 렉 터 리 의 uploads 폴 더 에 업로드 하고 저장 합 니 다.
총결산
위 에서 말 한 것 은 소 편 이 소개 한 Cropper.js 가 재단 사진 을 실현 하고 업로드(PC 엔 드)하 는 것 입 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기