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