史上最全基于vue的图片裁剪vue-cropper使用

史上最全基于vue的图片裁剪vue-cropper使用

• 基于vue的图片裁剪vue-cropper
• • 新的需求
  • vue-cropper官网
  • 代码拷贝
• 最后

基于vue的图片裁剪vue-cropper

最近小编好久没有写博客了，今天发现突然涨了好几个粉，特别的开心，为了回馈大家，我今天准备了一点点小小的心意，最近工作实在太忙，难得抽空更博了，不过最近小编会快马加鞭努力更博的。

新的需求

最近小编遇到一个图片裁剪的需求，对于一个前端小白的我来说，搞这些花里胡哨的东西，走了很多弯路，各种百度，改了又改，实则不易啊。废话不多说上大图：

vue-cropper官网

链接：https://github.com/xyxiao001/vue-cropper

安装：npm install vue-cropper 或者 yarn add vue-cropper

代码拷贝

废话不多说，代码也不多敲，相信大家和我一样，能粘贴绝不手敲，哈哈。

组件封装CropperImage.vue

<template>
  <div class="cropper-content">
    <div class="cropper-box">
      <div class="cropper">
        <vue-cropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.outputSize"
            :outputType="option.outputType"
            :info="option.info"
            :canScale="option.canScale"
            :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :full="option.full"
            :fixedBox="option.fixedBox"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :centerBox="option.centerBox"
            :height="option.height"
            :infoTrue="option.infoTrue"
            :maxImgSize="option.maxImgSize"
            :enlarge="option.enlarge"
            :mode="option.mode"
            @realTime="realTime"
            @imgLoad="imgLoad">
        </vue-cropper>
      </div>
      <!--底部操作工具按钮-->
      <div class=&