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

程序员文章站 2022-11-26 12:06:51

由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器，所以上网查询了很多资料，也试用了许多案例，发现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代码如下：

<!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生成的截图转换生成base64代码。

后台处理base64代码片段（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';
 }
 }
?>

实现效果：

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

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

总结

以上所述是小编给大家介绍的cropper.js 实现裁剪图片并上传(pc端) ，希望对大家有所帮助，

上一篇：使用jQuery实现页面定时弹出广告效果

下一篇： JavaScript 完成注册页面表单校验的实例

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