cropperjs裁剪头像功能实现总结

渡猿人

已于 2022-03-22 09:22:08 修改

阅读量1.6k

点赞数 13

文章标签：前端

于 2022-01-28 10:59:15 首次发布

本文链接：https://blog.csdn.net/m0_50105168/article/details/122728186

版权

一、安装cropperjs插件

npm install cropperjs

二、在vue页面引入cropperjs

<script>
  import Cropper from 'cropperjs'//引入cropperjs
  import 'cropperjs/dist/cropper.min.css'//引入cropperjs样式
export default {
  data() {
    return {

    }
  },

  methods: {

  }
}
</script>

三、开始布局你所需要的裁剪页面结构(在这里我只把必备的结构布局上了)

<template>
    <div class="mian">
    <div>
      <input class="file" type="file" @change="file_change($event)">
    </div>
    <el-dialog v-model="dialogTailorPicture" title="上传头像">
      <div id="" style="display: flex;flex-wrap: nowrap;justify-content: space-between;">
        <div class="log_img">
          <img src="" id="fileImg" ref="cropper_Img" width="100%" class="log_img_cropper">
        </div>
        <div class="log_imgs">
          <span style="font-size: 19px;">裁剪预览</span>
          <div class="small log_img_yvlan">
          </div>
        </div>
      </div>
      <div id="" class="log_buttons">
        <el-button @click="initCropper()">裁剪</el-button>
        <el-button @click="amplification()">放大</el-button>
        <el-button @click="reduce()">缩小</el-button>
        <el-button @click="left_rotation()">左旋转</el-button>
        <el-button @click="right_rotation()">右旋转</el-button>
        <el-button @click="restoration()">复位</el-button>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="uploadCropImg_false()">取消</el-button>
          <el-button type="primary" @click="uploadCropImg()">确定</el-button>
        </span>
      </template>
    </el-dialog>


  </div>
</template>

四、下面开始上逻辑代码你准备好了吗！

 methods: {
      // input type="file"文件上传
      file_change(event) {
        let file = event.target.files[0]; //获取file文件
        let file_type = 'image/jpeg,image/jpg,image/png,image/'.includes(file.type); //图片类型
        let file_size = file.size / 1024 / 1024 <= 0.5; //文件大小
        if (!file_type) {
          ElMessage.warning("上传图片格式不对!")
          return false
        } else if (!file_size) {
          ElMessage.warning("上传图片太大!")
          return false
        }
        var reader = new FileReader();
        reader.readAsDataURL(file); //转变base64 文件；
        reader.onload = (e) => {
          document.getElementById('fileImg').src = e.target.result; //把base64文件数据传给src，进行图片回显
        }
      },
      // 初始化cropper
      initCropper() {
        let cropper = new Cropper(this.$refs.cropper_Img, {
          aspectRatio: 1,
          viewMode: 1,
          background: true, //裁剪图片时的背景
          zoomable: true,
          modal: true,
          touchDragZoom: true,
          preview: ".small",
          ready(e) {
            self.croppable = true
          },
          crop: function(e) {

          }
        })
        this.cropper = cropper;
      },
      // 放大
      amplification(){
        this.cropper.zoom(0.1);
      },
      // 缩小
      reduce(){
        this.cropper.zoom(-0.1);
      },
      // 左旋转
      left_rotation(){
        this.cropper.rotate(60);
      },
      // 右旋转
      right_rotation(){
        this.cropper.rotate(-60);
      },
      // 复位
      restoration(){
        this.cropper.reset();
      },
      // 取消
      uploadCropImg_false(){
        mut.dialogTailorPicture = false; //关闭弹窗
        this.cropper.destroy();//销毁cropper来达到关闭cropper裁剪的的效果
      },
      // 保存裁剪后的数据
      uploadCropImg(){
        let res_base = this.cropper.getCroppedCanvas().toDataURL('image/png/jpeg', 0.4); //获取文件数据base64
        var file = this.base642File(res_base, sessionStorage.getItem('file_name')); //应刚才获取的是base64的数据根据项目接口的需求来转换格式；我这里需要file文件格式
      },
      base642File(dataurl, fileName) {
      	var arr = dataurl.split(','),
      		mime = arr[0].match(/:(.*?);/)[1],
      		bstr = atob(arr[1]),
      		n = bstr.length,
      		u8arr = new Uint8Array(n)
      	while (n--) {
      		u8arr[n] = bstr.charCodeAt(n)
      	}
      	return new File([u8arr], fileName, {
      		type: mime
      	})
      }
      // 到了这里基本裁剪的功能就已经实现了，只需要aioxs发送数据即可

    }

五、裁剪功能整体代码（不包含style）

 methods: {
      // input type="file"文件上传
      file_change(event) {
        let file = event.target.files[0]; //获取file文件
        let file_type = 'image/jpeg,image/jpg,image/png,image/'.includes(file.type); //图片类型
        let file_size = file.size / 1024 / 1024 <= 0.5; //文件大小
        if (!file_type) {
          ElMessage.warning("上传图片格式不对!")
          return false
        } else if (!file_size) {
          ElMessage.warning("上传图片太大!")
          return false
        }
        var reader = new FileReader();
        reader.readAsDataURL(file); //转变base64 文件；
        reader.onload = (e) => {
          document.getElementById('fileImg').src = e.target.result; //把base64文件数据传给src，进行图片回显
        }
      },
      // 初始化cropper
      initCropper() {
        let cropper = new Cropper(this.$refs.cropper_Img, {
          aspectRatio: 1,
          viewMode: 1,
          background: true, //裁剪图片时的背景
          zoomable: true,
          modal: true,
          touchDragZoom: true,
          preview: ".small",
          ready(e) {
            self.croppable = true
          },
          crop: function(e) {

          }
        })
        this.cropper = cropper;
      },
      // 放大
      amplification(){
        this.cropper.zoom(0.1);
      },
      // 缩小
      reduce(){
        this.cropper.zoom(-0.1);
      },
      // 左旋转
      left_rotation(){
        this.cropper.rotate(60);
      },
      // 右旋转
      right_rotation(){
        this.cropper.rotate(-60);
      },
      // 复位
      restoration(){
        this.cropper.reset();
      },
      // 取消
      uploadCropImg_false(){
        mut.dialogTailorPicture = false; //关闭弹窗
        this.cropper.destroy();//销毁cropper来达到关闭cropper裁剪的的效果
      },
      // 保存裁剪后的数据
      uploadCropImg(){
        let res_base = this.cropper.getCroppedCanvas().toDataURL('image/png/jpeg', 0.4); //获取文件数据base64
        var file = this.base642File(res_base, sessionStorage.getItem('file_name')); //应刚才获取的是base64的数据根据项目接口的需求来转换格式；我这里需要file文件格式
      },
      base642File(dataurl, fileName) {
      	var arr = dataurl.split(','),
      		mime = arr[0].match(/:(.*?);/)[1],
      		bstr = atob(arr[1]),
      		n = bstr.length,
      		u8arr = new Uint8Array(n)
      	while (n--) {
      		u8arr[n] = bstr.charCodeAt(n)
      	}
      	return new File([u8arr], fileName, {
      		type: mime
      	})
      }
      // 到了这里基本裁剪的功能就已经实现了，只需要aioxs发送数据即可

    }

注：后续会继续优化裁剪功能，有意向的朋友点点关注支持一下，在此感谢各位，此文章如有不妥之处还望大家多多指导。