基於vue的圖片裁剪vue-cropper
vue-cropper官網
http://xyxiao.cn/vue-cropper/example/javascript
需求：上傳圖片以前，按照必定比例進行剪裁，剪裁後上傳到服務器vue
image.png
安裝
npm install vue-cropperjava
使用
main.js裏面ios
import VueCropper from 'vue-cropper' Vue.use(VueCropper)
組件內npm
- 一、上傳按鈕
<!-- element 上傳圖片按鈕 --> <el-upload class="upload-demo" action="" drag :auto-upload="false" :show-file-list="false" :on-change='changeUpload'> <i class="el-icon-upload"></i> <div class="el-upload__text">點擊上傳</div> <div class="el-upload__tip">支持絕大多數圖片格式，單張圖片最大支持5MB</div> </el-upload>Ï
image.png
使用element-ui的上傳按鈕，要配置:auto-upload="false"（不要自動上傳）， :on-change='changeUpload'（選擇完圖片後的方法），一下子再交代changeUpload方法element-ui
- 二、設置一個彈出層，放剪裁圖片的cropper
<!-- vueCropper 剪裁圖片實現--> <el-dialog title="圖片剪裁" :visible.sync="dialogVisible" append-to-body> <div class="cropper-content"> <div class="cropper" style="text-align:center"> <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :centerBox="option.centerBox" :infoTrue="option.infoTrue" :fixedBox="option.fixedBox" @realTime="realTime" ></vueCropper> </div> </div> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="finish" :loading="loading">確認</el-button> </div> </el-dialog>
- 三、剪裁框的樣式
// 截圖 .cropper-content { .cropper { width: auto; height: 300px; } }
- 四、方法
option是剪裁插件的屬性配置，具體更多含義查看官網介紹
<script> import { client } from '@/utils/alioss' export default { data() { return { dialogVisible: false, // 裁剪組件的基礎配置option option: { img: '', // 裁剪圖片的地址 info: true, // 裁剪框的大小信息 outputSize: 0.8, // 裁剪生成圖片的質量 outputType: 'jpeg', // 裁剪生成圖片的格式 canScale: false, // 圖片是否容許滾輪縮放 autoCrop: true, // 是否默認生成截圖框 // autoCropWidth: 300, // 默認生成截圖框寬度 // autoCropHeight: 200, // 默認生成截圖框高度 fixedBox: true, // 固定截圖框大小 不容許改變 fixed: true, // 是否開啓截圖框寬高固定比例 fixedNumber: [7, 5], // 截圖框的寬高比例 full: true, // 是否輸出原圖比例的截圖 canMoveBox: false, // 截圖框可否拖動 original: false, // 上傳圖片按照原始比例渲染 centerBox: false, // 截圖框是否被限制在圖片裏面 infoTrue: true // true 爲展現真實輸出圖片寬高 false 展現看到的截圖框寬高 }, picsList: [], //頁面顯示的數組 // 防止重複提交 loading: false } }, methods: { // 上傳按鈕 限制圖片大小 changeUpload(file, fileList) { const isLt5M = file.size / 1024 / 1024 < 5 if (!isLt5M) { this.$message.error('上傳文件大小不能超過 5MB!') return false } this.fileinfo = file // 上傳成功後將圖片地址賦值給裁剪框顯示圖片 this.$nextTick(() => { this.option.img = file.url this.dialogVisible = true }) }, // 點擊裁剪，這一步是能夠拿處處理後的地址 finish() { this.$refs.cropper.getCropBlob((data) => { var fileName = 'goods' + this.fileinfo.uid this.loading = true //上傳阿里雲服務器 client().put(fileName, data).then(result => { this.dialogVisible = false this.picsList.push(result.url) }).catch(err => { console.log(err) this.loading = false }) }) } } } </script>