您好,登錄后才能下訂單哦!
這篇文章主要介紹“如何用Vue實(shí)現(xiàn)圖片裁剪組件”,在日常操作中,相信很多人在如何用Vue實(shí)現(xiàn)圖片裁剪組件問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”如何用Vue實(shí)現(xiàn)圖片裁剪組件”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
示例:
tip: 該組件基于vue-cropper二次封裝
安裝插件
npm install vue-cropper yarn add vue-cropper
寫入封裝的組件
<!-- 簡(jiǎn)易圖片裁剪組件 --- 二次封裝 --> <!-- 更多api https://github.com/xyxiao001/vue-cropper --> <!-- 使用:傳入圖片 比例 顯示隱藏。方法:監(jiān)聽底部按鈕點(diǎn)擊即可 ---更多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 { // 裁剪組件的基礎(chǔ)配置option // img: this.img, // 裁剪圖片的地址 outputSize: 1, // 裁剪生成圖片的質(zhì)量 outputType: 'jpeg', // 裁剪生成圖片的格式 info: true, // 裁剪框的大小信息 canScale: true, // 圖片是否允許滾輪縮放 autoCrop: true, // 是否默認(rèn)生成截圖框 // autoCropWidth: 300, // 默認(rèn)生成截圖框?qū)挾? // autoCropHeight: 200, // 默認(rèn)生成截圖框高度 fixed: true, // 是否開啟截圖框?qū)捀吖潭ū壤? // fixedNumber: this.fixedNumber, // 截圖框的寬高比例 full: true, // 是否輸出原圖比例的截圖 fixedBox: true, // 固定截圖框大小 不允許改變 canMove: true, //上傳圖片是否可以移動(dòng) canMoveBox: true, // 截圖框能否拖動(dòng) original: false, // 上傳圖片按照原始比例渲染 centerBox: true, // 截圖框是否被限制在圖片里面 // high:true,// 是否按照設(shè)備的dpr 輸出等比例圖片 infoTrue: true, // true 為展示真實(shí)輸出圖片寬高 false 展示看到的截圖框?qū)捀? // maxImgSize: 2000, //限制圖片最大寬度和高度 // enlarge: 1, //圖片根據(jù)截圖框輸出比例倍數(shù) mode: 'contain', //圖片默認(rèn)渲染方式 }; }, computed: {}, watch: {}, //生命周期 - 創(chuàng)建完成(訪問當(dāng)前this實(shí)例) created() {}, //生命周期 - 掛載完成(訪問DOM元素) mounted() {}, methods: { clickCancelCut() { this.$emit('clickCancelCut', '點(diǎn)擊取消'); this.$refs.cropper.stopCrop(); this.$refs.cropper.clearCrop(); }, clickRotate() { this.$refs.cropper.rotateRight(); this.$emit('clickRotate', '點(diǎn)擊旋轉(zhuǎn)'); }, 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>
到此,關(guān)于“如何用Vue實(shí)現(xiàn)圖片裁剪組件”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。