Vue圖片裁剪組件實例代碼
示例:
tip: 該組件基於vue-cropper二次封裝
安裝插件
npm install vue-cropper yarn add vue-cropper
寫入封裝的組件
<!-- 簡易圖片裁剪組件 --- 二次封裝 --> <!-- 更多api https://github.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="" /> <div @click="clickOk" class="okey">確定</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: '', }, //截圖框的寬高比例 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, // 是否輸出原圖比例的截圖 fixedBox: 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(); 引入css類 */ .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: 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; border-radius: 10px; } } } </style>
總結
到此這篇關於Vue圖片裁剪組件的文章就介紹到這瞭,更多相關Vue圖片裁剪組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue拖動截圖功能的簡單實現方法
- vue 如何使用vue-cropper裁剪圖片你知道嗎
- vue-cropper插件實現圖片截取上傳組件封裝
- vue利用插件實現按比例切割圖片
- Vue使用Vue-cropper實現圖片裁剪