vue+cropperjs插件，实现图片裁剪功能——PC端+移动端——技能提升

发现了一个图片裁剪的插件cropperjs，这个插件非常的强大，能够实现多种功能：

可以对指定的图片进行裁剪，可以自己选择裁剪的交互方式，如大小、纵横比等

还可以预览裁剪区域，确认裁剪后可以生成一个包含裁剪图的canvas对象，借助 canvas 的toDataURL 方法可以生成一张 Base64 格式的图片。

还有另外一种不使用 canvas 的方式，利用该工具丰富的 api 可以拿到裁剪区域 相对于 原图的各项数据，使用这些数据进行css绝对定位即可展示裁剪后的图，该方式可以保证图片不失真和完整。

大神使用cropperjs的链接：https://www.cnblogs.com/eightFlying/p/cropper-demo.html

cropperjs官网：https://fengyuanchen.github.io/cropper/

此篇文章只简单介绍一下等比例的裁剪功能及使用步骤。

1.安装cropperjs插件

npm install cropperjs --save-dev

安装完插件后，由于此插件并非很多页面都要用到，因此可以不在main.js主入口文件中全局引入，可以在需要使用图片裁剪功能的地方单独引入即可。

2.template部分代码

页面部分，有个原图部分+裁剪按钮+裁剪区域+裁剪后的图片部分。

<div class="before"></div>
<el-button @click="sureSava">裁剪</el-button>
<div class="container">
  <div class="img-container">
    <img src="@/assets/401_images/401.gif" ref="image" alt="" />
  </div>
  <div class="afterCropper">
    <img :src="afterImg" alt="" />
  </div>
</div>

3.js部分代码

import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
export default{
	data(){
		return{
			 myCropper: null,
      		 afterImg: "",
		}
	},
	created(){
		this.$nextTick(()=>{
			this.init();
		})
	},
	methods:{
		init(){
			this.myCropper = new Cropper(this.$refs.image,{
				viewMode:1,
				dragNode:'none',
				initialAspectRatio:1,
				aspectRatio:1,
				preview:'.before',
				background: false,
		        autoCropArea: 0.6,
		        zoomOnWheel: false
			})
		},
		sureSava(){
			this.afterImg = this.myCropper.getCroppedCanvas({
				imageSmoothingQuality:'high'
			}).toDataURL('image/jpeg');
		}
	}
}

4.css部分 

.container{
  display: flex;
}
.before{
  width: 100px;
  height: 100px;
  overflow: hidden;
  /* 这个属性可以得到想要的效果 */
}
.img-container{
  height: 400px;
  overflow: hidden;
}
.afterCropper{
  flex: 1;
  margin-left: 20px;
  border: 1px solid salmon; 
  text-align: center;
}
.afterCropper img{
  width: 150px;
  margin-top: 30px;
}

5.最终效果图

附录一个超级详细的使用参数说明：大神就是大神，生活中处处都是大神。

大神提供的cropperjs的参数详细说明：https://blog.csdn.net/achejq/article/details/93240104

完成！！！