cropper.js 实现裁剪图片并上传(PC端)

Cropper  

由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器，所以上网查询了很多资料，也试用了许多案例，发现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 2图片 不全部铺满1 （即缩小时可以有一边出现空隙）
3: the container should be within the canvas 2图片 全部铺满1 （即 再怎么缩小也不会出现空隙）

dragMode 拖动模式
Default: ‘crop’
Options:
‘crop’: create a new crop box 当鼠标 点击一处时根据这个点重新生成一个 裁剪框
‘move’: move the canvas 可以拖动图片
‘none’: do nothing 图片就不能拖动了

toggleDragModeOnDblclick： 默认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： 默认 true 。 是否允许扩展图片。（暂时不知道干嘛用）
zoomable： 默认true, 石头允许缩放图片。
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 是否调整窗口大小后恢复裁剪区域。

大小相关
minContainerWidth：类型：Number，默认值200。容器的最小宽度。
minContainerHeight：类型：Number，默认值100。容器的最小高度。
minCanvasWidth：类型：Number，默认值0。canvas 的最小宽度（image wrapper）。
minCanvasHeight：类型：Number，默认值0。canvas 的最小高度（image wrapper）。

监听触发的方法
build：类型：Function，默认值null。build.cropper
事件的简写方式。 ====== 。控件初始化前执行
built：类型：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代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  6.   <link rel="stylesheet" href="css/cropper.css">
  7.   <link rel="stylesheet" href="css/main.css">
  9.   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  10.   <!--[if lt IE 9]>
  11.     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  12.     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  13.   <![endif]-->
  14. </head>
  15. <body>
  16.   <!--[if lt IE 8]>
  17.     <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  18.   <![endif]-->
  20.   <!-- Content -->
  21.   <div class="container" style="margin-top:50px;">
  22.     <div class="row">
  23.       <div class="col-md-9">
  24.         <!-- <h3>Demo:</h3> -->
  25.         <div class="img-container">
  26.           ![](images/picture.jpg)
  27.         </div>
  28.       </div>
  29.       <div class="col-md-3">
  30.         <!-- <h3>Preview:</h3> -->
  31.         <div class="docs-preview clearfix">
  32.           <div class="img-preview preview-lg"></div>
  33.         </div>
  34.       </div>
  35.     </div>
  36.     <div class="row">
  37.       <div class="col-md-9 docs-buttons">
  38.         <!-- <h3>Toolbar:</h3> -->
  40.         <div class="btn-group">
  41.           <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
  42.             <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("zoom", 0.1)">
  43.               放大
  44.             </span>
  45.           </button>
  46.           <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
  47.             <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("zoom", -0.1)">
  48.               缩小
  49.             </span>
  50.           </button>
  51.         </div>
  53.         <div class="btn-group">
  54.           <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left">
  55.             <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("move", -10, 0)">
  56.               左移
  57.             </span>
  58.           </button>
  59.           <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right">
  60.             <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("move", 10, 0)">
  61.               右移
  62.             </span>
  63.           </button>
  64.           <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up">
  65.             <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("move", 0, -10)">
  66.               上移
  67.             </span>
  68.           </button>
  69.           <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down">
  70.             <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("move", 0, 10)">
  71.               下移
  72.             </span>
  73.           </button>
  74.         </div>
  76.         <div class="btn-group">
  77.           <button type="button" class="btn btn-primary" data-method="rotate" data-option="-90" title="Rotate Left">
  78.             <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("rotate", -90)">
  79.               左转90º
  80.             </span>
  81.           </button>
  82.           <button type="button" class="btn btn-primary" data-method="rotate" data-option="90" title="Rotate Right">
  83.             <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("rotate", 90)">
  84.               右转90º
  85.             </span>
  86.           </button>
  87.         </div>
  89.         <div class="btn-group">
  90.           <button type="button" class="btn btn-primary" data-method="reset" title="Reset">
  91.             <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("reset")">
  92.               刷新
  93.             </span>
  94.           </button>
  95.           <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
  96.             <input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
  97.             <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="Import image with Blob URLs">
  98.               上传图片
  99.             </span>
  100.           </label>
  101.         </div>
  103.         <div class="btn-group btn-group-crop">
  104.             <button class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 180, "height": 90 }" type="button">
  105.                 上传头像
  106.             </button>
  107.         </div>
  109.         <!-- Show the cropped image in modal -->
  110.         <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
  111.           <div class="modal-dialog">
  112.             <div class="modal-content">
  113.               <div class="modal-header">
  114.                 <h5 class="modal-title" id="getCroppedCanvasTitle">Cropped</h5>
  115.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  116.                   <span aria-hidden="true">×</span>
  117.                 </button>
  118.               </div>
  119.               <div class="modal-body"></div>
  120.               <div class="modal-footer">
  121.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  122.                 <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Download</a>
  123.               </div>
  124.             </div>
  125.           </div>
  126.         </div><!-- /.modal -->
  127.       </div><!-- /.docs-buttons -->
  128.   </div>
  130.   <!-- Scripts -->
  131.   <script src="js/jquery.min.js"></script>
  132.   <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  133.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  134.   <script src="js/cropper.js"></script>
  135.   <script src="js/main.js"></script>
  136. </body>
  137. </html>

cropper.js部分参数代码：

  1. (function (global, factory) {
  2.   typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery')) :
  3.   typeof define === 'function' && define.amd ? define(['jquery'], factory) :
  4.   (factory(global.$));
  5. }(this, (function ($) { 'use strict';
  7. $ = 'default' in $ ? $['default'] : $;
  9. var DEFAULTS = {
  10.   // Define the view mode of the cropper
  11.   viewMode: 0, // 0, 1, 2, 3  显示
  13.   // Define the dragging mode of the cropper
  14.   dragMode: 'crop', // 'crop', 'move' or 'none'
  16.   // Define the aspect ratio of the crop box
  17.   aspectRatio: NaN,
  19.   // An object with the previous cropping result data
  20.   data: null,
  22.   // A selector for adding extra containers to preview
  23.   preview: '',
  25.   // Re-render the cropper when resize the window
  26.   responsive: true,
  28.   // Restore the cropped area after resize the window
  29.   restore: true,
  31.   // Check if the current image is a cross-origin image
  32.   checkCrossOrigin: true,
  34.   // Check the current image's Exif Orientation information
  35.   checkOrientation: true,
  37.   // Show the black modal
  38.   modal: true,
  40.   // Show the dashed lines for guiding
  41.   guides: true,
  43.   // Show the center indicator for guiding
  44.   center: true,
  46.   // Show the white modal to highlight the crop box
  47.   highlight: true,
  49.   // Show the grid background
  50.   background: true,
  52.   // Enable to crop the image automatically when initialize
  53.   autoCrop: true,
  55.   // Define the percentage of automatic cropping area when initializes
  56.   autoCropArea: 0.8,
  58.   // Enable to move the image
  59.   movable: true,
  61.   // Enable to rotate the image
  62.   rotatable: true,
  64.   // Enable to scale the image
  65.   scalable: true,
  67.   // Enable to zoom the image
  68.   zoomable: true,
  70.   // Enable to zoom the image by dragging touch
  71.   zoomOnTouch: true,
  73.   // Enable to zoom the image by wheeling mouse
  74.   zoomOnWheel: true,
  76.   // Define zoom ratio when zoom the image by wheeling mouse
  77.   wheelZoomRatio: 0.1,
  79.   // Enable to move the crop box
  80.   cropBoxMovable: true,
  82.   // Enable to resize the crop box
  83.   cropBoxResizable: true,
  85.   // Toggle drag mode between "crop" and "move" when click twice on the cropper
  86.   toggleDragModeOnDblclick: true,
  88.   // Size limitation
  89.   minCanvasWidth: 0,
  90.   minCanvasHeight: 0,
  91.   minCropBoxWidth: 0,
  92.   minCropBoxHeight: 0,
  93.   minContainerWidth: 200,
  94.   minContainerHeight: 100,
  96.   // Shortcuts of events
  97.   ready: null,
  98.   cropstart: null,
  99.   cropmove: null,
  100.   cropend: null,
  101.   crop: null,
  102.   zoom: null
  103. };

main.js 代码如下：

  1. $(function () {
  3.   'use strict';//表示强规则
  5.   var console = window.console || { log: function () {} };
  6.   var URL = window.URL || window.webkitURL;
  7.   var $image = $('#image');
  8.   var $download = $('#download');
  9.   //获取图片截取的位置
  10.   var $dataX = $('#dataX');
  11.   var $dataY = $('#dataY');
  12.   var $dataHeight = $('#dataHeight');
  13.   var $dataWidth = $('#dataWidth');
  14.   var $dataRotate = $('#dataRotate');
  15.   var $dataScaleX = $('#dataScaleX');
  16.   var $dataScaleY = $('#dataScaleY');
  17.   var options = {
  18.         aspectRatio: 1 / 1, //裁剪框比例1:1
  19.         preview: '.img-preview',
  20.         crop: function (e) {
  21.           $dataX.val(Math.round(e.x));
  22.           $dataY.val(Math.round(e.y));
  23.           $dataHeight.val(Math.round(e.height));
  24.           $dataWidth.val(Math.round(e.width));
  25.           $dataRotate.val(e.rotate);
  26.           $dataScaleX.val(e.scaleX);
  27.           $dataScaleY.val(e.scaleY);
  28.         }
  29.       };
  30.   var originalImageURL = $image.attr('src');
  31.   var uploadedImageURL;
  34.   // Tooltip
  35.   $('[data-toggle="tooltip"]').tooltip();
  38.   // Cropper
  39.   $image.on({
  40.     ready: function (e) {
  41.       console.log(e.type);
  42.     },
  43.     cropstart: function (e) {
  44.       console.log(e.type, e.action);
  45.     },
  46.     cropmove: function (e) {
  47.       console.log(e.type, e.action);
  48.     },
  49.     cropend: function (e) {
  50.       console.log(e.type, e.action);
  51.     },
  52.     crop: function (e) {
  53.       console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
  54.     },
  55.     zoom: function (e) {
  56.       console.log(e.type, e.ratio);
  57.     }
  58.   }).cropper(options);
  61.   // Buttons
  62.   if (!$.isFunction(document.createElement('canvas').getContext)) {
  63.     $('button[data-method="getCroppedCanvas"]').prop('disabled', true);
  64.   }
  66.   if (typeof document.createElement('cropper').style.transition === 'undefined') {
  67.     $('button[data-method="rotate"]').prop('disabled', true);
  68.     $('button[data-method="scale"]').prop('disabled', true);
  69.   }
  72.   // Download
  73.   if (typeof $download[0].download === 'undefined') {
  74.     $download.addClass('disabled');
  75.   }
  78.   // Options
  79.   $('.docs-toggles').on('change', 'input', function () {
  80.     var $this = $(this);
  81.     var name = $this.attr('name');
  82.     var type = $this.prop('type');
  83.     var cropBoxData;
  84.     var canvasData;
  86.     if (!$image.data('cropper')) {
  87.       return;
  88.     }
  90.     if (type === 'checkbox') {
  91.       options[name] = $this.prop('checked');
  92.       cropBoxData = $image.cropper('getCropBoxData');
  93.       canvasData = $image.cropper('getCanvasData');
  95.       options.ready = function () {
  96.         $image.cropper('setCropBoxData', cropBoxData);
  97.         $image.cropper('setCanvasData', canvasData);
  98.       };
  99.     } else if (type === 'radio') {
  100.       options[name] = $this.val();
  101.     }
  103.     $image.cropper('destroy').cropper(options);
  104.   });
  107.   // Methods
  108.   // 点击开始计算图片位置，获取位置
  109.   $('.docs-buttons').on('click', '[data-method]', function () {
  110.     var $this = $(this);
  111.     var data = $this.data();
  112.     var $target;
  113.     var result;
  115.     if ($this.prop('disabled') || $this.hasClass('disabled')) {
  116.       return;
  117.     }
  119.     if ($image.data('cropper') && data.method) {
  120.       data = $.extend({}, data); // Clone a new one
  122.       if (typeof data.target !== 'undefined') {
  123.         $target = $(data.target);
  125.         if (typeof data.option === 'undefined') {
  126.           try {
  127.             data.option = JSON.parse($target.val());
  128.           } catch (e) {
  129.             console.log(e.message);
  130.           }
  131.         }
  132.       }
  134.       if (data.method === 'rotate') {
  135.         $image.cropper('clear');
  136.       }
  138.       result = $image.cropper(data.method, data.option, data.secondOption);
  140.       if (data.method === 'rotate') {
  141.         $image.cropper('crop');
  142.       }
  144.       switch (data.method) {
  145.         case 'scaleX':
  146.         case 'scaleY':
  147.           $(this).data('option', -data.option);
  148.           break;
  150.         case 'getCroppedCanvas':
  151.         //上传头像
  152.           if (result) {
  153.             var imgBase=result.toDataURL('image/jpeg');
  154.             var data={imgBase:imgBase};
  155.             $.post('/docs/upload.php',data,function(ret){
  156.               if(ret=='true'){
  157.                 alert('上传成功');
  158.               }else{
  159.                 alert('上传失败');
  160.               }
  161.             },'text');
  162.           }
  164.           break;
  166.         case 'destroy':
  167.           if (uploadedImageURL) {
  168.             URL.revokeObjectURL(uploadedImageURL);
  169.             uploadedImageURL = '';
  170.             $image.attr('src', originalImageURL);
  171.           }
  173.           break;
  174.       }
  176.       if ($.isPlainObject(result) && $target) {
  177.         try {
  178.           $target.val(JSON.stringify(result));
  179.         } catch (e) {
  180.           console.log(e.message);
  181.         }
  182.       }
  184.     }
  185.   });
  188.   // Keyboard
  189.   $(document.body).on('keydown', function (e) {
  191.     if (!$image.data('cropper') || this.scrollTop > 300) {
  192.       return;
  193.     }
  195.     switch (e.which) {
  196.       case 37:
  197.         e.preventDefault();
  198.         $image.cropper('move', -1, 0);
  199.         break;
  201.       case 38:
  202.         e.preventDefault();
  203.         $image.cropper('move', 0, -1);
  204.         break;
  206.       case 39:
  207.         e.preventDefault();
  208.         $image.cropper('move', 1, 0);
  209.         break;
  211.       case 40:
  212.         e.preventDefault();
  213.         $image.cropper('move', 0, 1);
  214.         break;
  215.     }
  217.   });
  220.   // Import image
  221.   var $inputImage = $('#inputImage');
  223.   if (URL) {
  224.     $inputImage.change(function () {
  225.       var files = this.files;
  226.       var file;
  228.       if (!$image.data('cropper')) {
  229.         return;
  230.       }
  232.       if (files && files.length) {
  233.         file = files[0];
  235.         if (/^image\/\w+$/.test(file.type)) {
  236.           if (uploadedImageURL) {
  237.             URL.revokeObjectURL(uploadedImageURL);
  238.           }
  240.           uploadedImageURL = URL.createObjectURL(file);
  241.           $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
  242.           $inputImage.val('');
  243.         } else {
  244.           window.alert('Please choose an image file.');
  245.         }
  246.       }
  247.     });
  248.   } else {
  249.     $inputImage.prop('disabled', true).parent().addClass('disabled');
  250.   }
  252. });

使用canvas生成的截图转换生成base64代码。
后台处理base64代码片段（PHP服务端）。

upload.php代码如下：

  1. <?php
  2.     error_reporting(0);//禁用错误报告  
  3.     if (IS_POST) {
  5.         header('Content-type:text/html;charset=utf-8');
  6.         $base64_image_content = $_POST['imgBase'];
  9.         //将base64编码转换为图片保存
  10.         if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)) {
  11.             $type = $result[2];
  12.             $new_file = "./uploads/";
  13.             if (!file_exists($new_file)) {
  14.                 //检查是否有该文件夹，如果没有就创建，并给予最高权限
  15.                 mkdir($new_file, 0700);
  16.             }
  17.             $img=time() . ".{$type}";
  18.             $new_file = $new_file . $img;
  19.             //将图片保存到指定的位置
  20.             if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))) {
  21.                 echo 'true';
  22.             }else{
  23.                 echo 'false';
  24.             }
  25.         }else{
  26.             echo 'false';
  27.         }
  29.     }
  32. ?>

实现效果：

选择要截取的图片位置，按“上传头像”按钮，截取的图片就上传并保存到服务器本站点目录的uploads文件夹中。



评论 5

发表评论

点击排行

标签云

友情链接

Top