前端vue-cropperjs實(shí)現(xiàn)圖片裁剪方案

更新時(shí)間：2022年07月08日 15:31:18 作者：竹業(yè)

這篇文章主要為大家介紹了前端vue-cropperjs實(shí)現(xiàn)圖片裁剪方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

做了個(gè)圖片的裁剪的功能和預(yù)覽的功能，前端圖片的裁剪方案，大多數(shù)都是用cropperjs進(jìn)行封裝，npm上有vue-cropperjs可以直接用起來，viewerjs是用來實(shí)現(xiàn)圖片的預(yù)覽，這里直接使用了v-viewer來實(shí)現(xiàn)。

可以點(diǎn)擊現(xiàn)在地址體驗(yàn)喔

git倉庫地址以及在線demo地址

圖片裁剪

圖片裁剪的流程

首先使用el-upload組件，渲染已經(jīng)存在或者裁剪過的圖片
點(diǎn)擊文件上傳，選中需要裁剪的圖片
彈出一個(gè)彈框，在彈框中使用vue-cropperjs實(shí)現(xiàn)圖片裁剪
裁剪完成后，通過回調(diào)函數(shù)，將處理后的圖片文件（Blob格式）上傳到服務(wù)器或者本地預(yù)覽出來
裁剪完成的圖片列表，通過v-viewer實(shí)現(xiàn)點(diǎn)擊全屏預(yù)覽（輔助作用）

vue-cropperjs的使用

代碼實(shí)現(xiàn)

首先在組件注冊VueCropper組件
直接可以通過vue-cropper標(biāo)簽使用組件
設(shè)置this.$refs.cropper.setAspectRatio(1)之后，圖片只能按照一定的比例裁剪，想要隨意裁剪可以不設(shè)置
通過this.$refs.cropper.relativeZoom、this.onRotateDegreeChange、this.$refs.cropper.move、this.$refs.cropper.scaleX 等API，可以對圖片進(jìn)行平移、縮放、翻轉(zhuǎn)、旋轉(zhuǎn)等操作
通過this.$refs.cropper.getCroppedCanvas().toBlob()獲取到處理后圖片的Blob格式文件
Blob格式文件處理成File格式后，上傳到服務(wù)器

// 引入組件并注冊
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方法中設(shè)置裁剪的寬高比例
this.$refs.cropper.setAspectRatio(this.aspectRatioValue);

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

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

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

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

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

// 獲取修改后的圖片的數(shù)據(jù)
  this.$refs.cropper
      .getCroppedCanvas({
        // 限制畫布大小，限制生成的圖片體積
        maxWidth: 2056,
        maxHeight: 2056,
      })
      .toBlob(
        (blob) => {
          // 調(diào)用確定的回調(diào)函數(shù)，將blob上傳到服務(wù)器或者本地預(yù)覽
          this.$emit("confirm", blob);
        },
        // 如果旋轉(zhuǎn)角度不為直角，則圖片一定會出現(xiàn)空白區(qū)域，空白區(qū)域默認(rèn)透明，使用 png 格式
        //this.rotateDegree % 90 === 0 ? this.file.type : 'image/png',
        this.file.type,
        // 質(zhì)量
        this.quality
      );
      
// 將文件上傳到服務(wù)器
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) => {
          // ...
     })
}

實(shí)現(xiàn)效果

v-viewer的使用

代碼實(shí)現(xiàn)

v-viewer主要的實(shí)現(xiàn)圖片的全屏預(yù)覽，基于viewerjs封裝

首先在main.js中引入css和注冊v-viewer插件
在頁面中可以直接通過this.$viewerApi 調(diào)用，傳入圖片路徑的數(shù)組和對應(yīng)的索引，實(shí)現(xiàn)全屏預(yù)覽圖片

// 首先在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"
    ],
});