jquery+cropper剪切、旋转、缩放图片

cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。

效果

demo源码地址

安装cropper

cnpm i cropper --save-dev

使用cropper

使用前，我们需要先了解一下cropper 文档，以及cropper的源码

cropper参数源码

常用参数说明

名称	类型及默认值	说明
viewMode	类型：String，默认值0。	定义裁剪器的视图模式
dragMode	类型：String，默认值crop。	定义裁剪器的拖动模式
initialAspectRatio	类型：Number，默认值NaN。	定义裁剪框的初始纵横比
aspectRatio	类型：Number，默认值NaN。例如 2/1，3/1，2/3 …	定义裁剪框的纵横比
preview	类型：String，默认值 ’ '。	用于预览容器的选择器
background	类型：Boolean，默认值true。	是否在容器上显示网格背景
autoCropArea	类型：Number，默认值0.8。	定义自动剪裁区域的大小
zoomOnWheel	类型：Boolean，默认值true。	是否允许鼠标 缩放图片
cropBoxResizable	类型：Boolean，默认值true。	是否允许改变剪裁框的大小
cropBoxMovable	类型：Boolean，默认值true。	是是否可以移动裁剪框
rotatable	类型：Boolean，默认值true。	是否允许旋转图片

CDN引入

<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="assets/js/cropper.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/cropper.css">

核心html代码

 <div class="popup-wrap">
    <div  class="s-upload-container">
      
      <div class="head">
        <span>上传图片</span>
        <input type="button" class="btn" id="closeBtn" value="关闭" />
      </div>
      <div class="s-upload-main">
        <!-- 上传图片 -->
        <div class="top-box">
          <span class="title">图片上传</span>
          <div class="btn file-box">
            选择文件
            <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="file" class="btn" onchange="selectImg(this)" multiple="multiple">
          </div>
          <div class="right">预览区域</div>
        </div>
        <div class="s-upload-content">
          <!-- 裁剪区域 -->
          <div class="left-box">
            <img src="" id="imageId" alt="" class="image"> 
          </div>
          <!-- 预览区域 -->
          <div class="right-box">
            <div class="previewBox"></div>
          </div>
        </div>
        <div class="action bottom-box">
          <!-- 旋转 -->
            <div class="left">
              <input type="button" id="btnLeft"  value="向左旋转" class="btn" onclick="rotateFn('1')">
              <input type="button" id="btnRight" value="向右旋转" class="btn" onclick="rotateFn('2')">
            </div>
            <div class="right">
              <!-- 放大、缩小、还原 -->
              <input type="button" id="btnLarge" class="btn" value="放大">
              <input type="button" id="btnSmall" class="btn" value="缩小" >
              <input type="button" id="btnScale" class="btn" value="换向">
              <input type="button" id="btnInit" class="btn" value="还原">
              <!-- 保存 -->
              <input type="button" id="btnSubmit" class="btn submit" value="保存修改" >
            </div>
        </div>
      </div>	
    </div>
  </div>

事件方法

img

裁剪区域的img，必须要一个可见的块级标签包裹。

初始化

// cut_size 为裁剪的限制尺寸
function init (cut_size){
	var sizeArr = [0,0];
	var aspectRatio = null
	if(cut_size){
		sizeArr = cut_size.split('*');
		let w = sizeArr[0]*1
		var h = sizeArr[1]*1

		if(w > h){
			aspectRatio = (w/h)  / 1
		} else {
			aspectRatio = 1 / (h/w)
		}
	}


	$('#imageId').cropper({
		viewMode: 1,
		dragMode: 'none',
		initialAspectRatio: 1,
		preview: '.previewBox',
		// 是否在容器上显示网格背景
		background: true,
		// 定义自动剪裁区域的大小
		// autoCropArea: 1,
		// 是否允许鼠标 缩放图片
		zoomOnWheel: false,
		// 是否允许改变剪裁框的大小
		cropBoxResizable:true,
		// 是否可以移动裁剪框
		cropBoxMovable:true,
		// 是否允许旋转图片
		rotatable: true,
		aspectRatio:aspectRatio
	})
}

rotate 旋转图像

// 角度
var deg = 0;
//向左旋转
$("#btnLeft").on("click",function () {
	rotateFn(1)
});
//向右旋转
$("#btnRight").on("click",function () {
	rotateFn(2)
});
// 旋转
function rotateFn (type){
	if(type ==1){
		deg += 90
	} else {
		deg -= 90
	}

	$('#imageId').cropper("rotate", deg);
}

zoom 放大、缩小图像

// 放大
$("#btnLarge").on("click",function () {
	$('#imageId').cropper("zoom",0.1);
});

// 缩小
$("#btnSmall").on("click",function () {
	$('#imageId').cropper("zoom",-0.1);
});

scaleX 翻转图像

	var flagX = true;
	$("#btnScale").on("click",function () {
		if(flagX){
			$('#imageId').cropper("scaleX", -1);
			flagX = false;
		}else{
			$('#imageId').cropper("scaleX", 1);
			flagX = true;
		}
		flagX != flagX;
	});

reset 还原裁剪区域

$("#btnInit").on("click",function () {
	$('#imageId').cropper("reset");
});

destroy 销毁cropper

$('#imageId').cropper("destroy");