vue--剪裁图片vueCropper

小菜鸟来更新   记录vueCropper的使用

（1）小插曲 fileReader

使用图片剪裁之前要上传文件，上传使用的input file,

然后查看控制台，上传文件的文本的数据格式是ArrayBuffer，如下图，

百度了一下解释是这样的：ArrayBuffer表示二进制数据的原始缓冲区，该缓冲区用于存储各种类型化数组的数据。无法直接读取或写入， 需要通过其他方式来读写。 但可根据需要将其传递到类型化数组或 DataView 对象来解释原始缓冲区。

使用FileReader获得上传的文件后对文件进行处理时

// reader.readAsArrayBuffer(file)  // 将内容转化为ArrayBuffer格式，此时需将ArrayBuffer转化为blob后可获得图片预览图片

//reader.readAsDataURL(file)      //将内容转化为base64格式，可直接预览图片

// reader.readAsBinaryString(file)  

// reader.readAsText(file) // 将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)

上传图片代码如下：

 

    // 上传
    uploadFn (e) {
      var file = e.target.files[0]
      console.info(file)
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
        return false
      }
      var reader = new FileReader()
      reader.onload = (e) => {
        // event.target.result 文件里的文本
        let data = e.target.result
        // console.info(data)
        if (typeof data === 'object') {
          // ArrayBuffer的话需转换格式
          data = window.URL.createObjectURL(new Blob([data]))
          // console.info(data)
        }
        this.option.img = data
      }
      reader.readAsArrayBuffer(file) // 将内容转化为ArrayBuffer格式
      // reader.readAsDataURL(file) // 将内容转化为base64格式
      // reader.readAsBinaryString(file)
      // reader.readAsText(file) // 将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)
    },

(2)剪裁组件 

<vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.size"
                :outputType="option.outputType"
                :canScale = "option.canScale"
                :autoCrop = "option.autoCrop"
                :autoCropWidth = "option.autoCropWidth"
                :autoCropHeight = "option.autoCropHeight"
                :high = "option.high"
                @realTime="realTime"
              ></vueCropper>

（3）实时预览，旋转，保存

试试预览的需按照官方文档写，最好加一个父级盒子

              <div class="imgView">
                <!-- <img :src="imgCropper" alt=""> -->
                <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden',
                    'margin': '5px'}">
                  <div :style="previews.div">
                    <img :src="option.img" :style="previews.img">
                  </div>
                </div>
              </div>

写的有点乱 先存下，主要的点（1）对图片格式的处理，base64 、ArrayBuffer、blob

(2)预览 的布局使用官方结构，多看api