示例：

tip: 該元件基於-cropper二次封裝

安裝外掛

npm install vue-cropper

yarn add vue-cropper

寫入封裝的元件

<!-- 簡易圖片裁剪元件 --- 二次封裝 -->
<!-- 更多api https://.com/xyxiao001/vue-cropper -->
<!-- 使用：傳入圖片 比例 顯示隱藏。方法：監聽底部按鈕點選即可  ---更多props查詢文件自行新增 -->

<template>
  <div v-if="value" :value="value" @input="val => $emit('input',val)" class="conbox">
    <div class="info">
      <vueCropper
        ref="cropper"
        :img="img"
        :outputSize="outputSize"
        :outputType="outputType"
        :info="info"
        :canScale="canScale"
        :autoCrop="autoCrop"
        :fixed="fixed"
        :fixedNumber="fixedNumber"
        :full="full"
        :fixedBox="fixedBox"
        :canMove="canMove"
        :canMoveBox="canMoveBox"
        :original="original"
        :centerBox="centerBox"
        :infoTrue="infoTrue"
        :mode="mode"
      ></vueCropper>
    </div>
    <div class="btns">
      <div @click="clickCancelCut" class="cancel">取消</div>
      <img @click="clickRotate" src="../../assets/paradise/rotate.png" alt="Vue圖片裁剪元件例項程式碼" />
      <div @click="clickOk" class="okey">確定</tavpTqDzLK
 
div>
    </div>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper';
export default {
  name: 'PictureCropping',components: { VueCropper },props: {
    value: {
      type: Boolean,default: false,},//裁剪圖片的地址
    img: {
      type: String,default: 'www.cppcns.com
 
',//截圖框的寬高比例
    fixedNumber: {
      type: Array,default: () => {
        return [1,1];
      },data() {
    return {
      // 裁剪元件的基礎配置option
      //   img: this.img,// 裁剪圖片的地址
      outputSize: 1,// 裁剪生成圖片的質量
      outputType: 'jpeg',// 裁剪生成圖片的格式
      info: true,// 裁剪框的大小資訊
      canScale: true,// 圖片是否允許滾輪縮放
      autoCrop: true,// 是否預設生成截圖框
      // autoCropWidth: 300,// 預設生成截圖框寬度
      // autoCropHeight: 200,// 預設生成截圖框高度
      fixed: true,// 是否開啟截圖框寬高固定比例
      //   fixedNumber: this.fixedNumber,// 截圖框的寬高比例
      full: true,// 是否輸出原圖比例的截圖
      fixwww.cppcns.com
 
edBox: true,// 固定截圖框大小 不允許改變
      canMove: true,//上傳圖片是否可以移動
      canMoveBox: true,// 截圖框能否拖動
      original: false,// 上傳圖片按照原始比例渲染
      centerBox: true,// 截圖框是否被限制在圖片裡面
      // high:true,// 是否按照裝置的dpr 輸出等比例圖片
      infoTrue: true,// true 為展示真實輸出圖片寬高 false 展示看到的截圖框寬高
      // maxImgSize: 2000,//限制圖片最大寬度和高度
      // enlarge: 1,//圖片根據截圖框輸出比例倍數
      mode: 'contain',//圖片預設渲染方式
    };
  },computed: {},watch: {},//生命週期 - 建立完成（訪問當前this例項）
  created() {},//生命週期 - 掛載完成（訪問DOM元素）
  mounted() {},methods: {
    clickCancelCut() {
      this.$emit('clickCancelCut','點選取消');
      this.$refs.cropper.stopCrop();
      this.$refs.cropper.clearCrop();
    },clickRotate() {
      this.$refs.cropper.rotateRight();
      this.$emit('clickRotate','點選旋轉');
    },clickOk() {
      //輸出裁剪的base64
      this.$refs.cropper.getCropData(data => {
        this.$emit('clickOk',data);
        this.$refs.cropper.stopCrop();
        this.$refs.cropper.clearCrop();
      });
    },};
</script>
<style lang='less' scoped>
/* @import url(); 引入類 */
.conbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  height: 100vh;
  width: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .info {
    width:tavpTqDzLK auto;
    height: 800px;
    .vue-cropper {
      background-image: none;
      background-color: #000;
    }
  }
  .btns {
    padding: 0 20px;

    color: #fff;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    img {
      width: 85px;
      height: 85px;
    }
    .cancel {
      background-color: #606465;
      padding: 15px 20px;
      width: 100px;
      border-radius: 10px;
    }
    .okey {
      background-color: #df6457;
      padding: 15px 20px;
      width: 100px;
      bordhttp://www.cppcns.comer-radius: 10px;
    }
  }
}
</style>

總結

到此這篇關於Vue圖片裁剪元件的文章就介紹到這了,更多相關Vue圖片裁剪元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！