前端vue-cropperjs實現圖片裁剪方案

// 引入組件並註冊
import "cropperjs/dist/cropper.css";
import VueCropper from "vue-cropperjs";

// 直接使用組件
<vue-cropper
  overflow-hidden
  ref="cropper"
  :src="src"
  preview=".preview"
  :minContainerHeight="500"
  background
  :ready="onReady"
/>

// 圖片可以在onReady方法中設置裁剪的寬高比例
this.$refs.cropper.setAspectRatio(this.aspectRatioValue);

// 縮放圖片
this.$refs.cropper.relativeZoom(percent);

// 圖片旋轉角度
this.onRotateDegreeChange(this.rotateDegree);

// 圖片平移
this.$refs.cropper.move(offsetX, offsetY);

// 圖片翻轉
this.$refs.cropper.scaleX(scale);
this.$refs.cropper.scaleY(scale);

// 重置
this.$refs.cropper.reset();

// 獲取修改後的圖片的數據
  this.$refs.cropper
      .getCroppedCanvas({
        // 限制畫佈大小，限制生成的圖片體積
        maxWidth: 2056,
        maxHeight: 2056,
      })
      .toBlob(
        (blob) => {
          // 調用確定的回調函數，將blob上傳到服務器或者本地預覽
          this.$emit("confirm", blob);
        },
        // 如果旋轉角度不為直角，則圖片一定會出現空白區域，空白區域默認透明，使用 png 格式
        //this.rotateDegree % 90 === 0 ? this.file.type : 'image/png',
        this.file.type,
        // 質量
        this.quality
      );
      
// 將文件上傳到服務器
function onCropperConfirm(blob) {
    let file = new File([blob], filename, { type: blob.type,});
     const formData = new FormData();
     formData.append("file", file);
     // ...
     axios.post("/upload", formData).then((res) => {
          // ...
     })
}

// 首先在main.js中引入組件
import "viewerjs/dist/viewer.css";
import VueViewer from "v-viewer";
Vue.use(VueViewer);

// 組件中使用
this.$viewerApi({
    options: {
      toolbar: true,
      initialViewIndex: 1,
    },
    images: [
        "https://placem.at/people?random=1&txt=0&w=500&h=500",
        "https://placem.at/people?random=1&txt=0&w=1000&h=500"
    ],
});