1.配置cropper
npm install vue-cropper
2.局部引入
import { VueCropper } from "vue-cropper";
3.使用html
<!-- 剪切圖片的彈框-->
? ? <div class="upload-dialog">
? ? ? <el-dialog title="圖片裁剪" :visible.sync="isShowCropper" :close-on-click-modal="false" custom-class="cropper-dialog">
? ? ? ? <div class="vue-cropper-box">
? ? ? ? ? <div class="vue-cropper-content">
? ? ? ? ? ? <vueCropper
? ? ? ? ? ? ? ref="cropper"
? ? ? ? ? ? ? :img="option.img"
? ? ? ? ? ? ? :outputSize="option.size"
? ? ? ? ? ? ? :outputType="option.outputType"
? ? ? ? ? ? ? :info="option.info"
? ? ? ? ? ? ? :full="option.full"
? ? ? ? ? ? ? :canMove="option.canMove"
? ? ? ? ? ? ? :canMoveBox="option.canMoveBox"
? ? ? ? ? ? ? :original="option.original"
? ? ? ? ? ? ? :autoCrop="option.autoCrop"
? ? ? ? ? ? ? :autoCropWidth="option.autoCropWidth"
? ? ? ? ? ? ? :autoCropHeight="option.autoCropHeight"
? ? ? ? ? ? ? :fixedBox="option.fixedBox"
? ? ? ? ? ? ? @realTime="realTime"
? ? ? ? ? ? ? @imgLoad="imgLoad"
? ? ? ? ? ></vueCropper>
? ? ? ? ? </div>
? ? ? ? ? <div class="operate-wrap">
? ? ? ? ? ? <div class="lf">
? ? ? ? ? ? ? <el-button type="primary" plain @click="turnLeft">左旋轉(zhuǎn)</el-button>
? ? ? ? ? ? ? <el-button type="primary" plain @click="turnRight">右旋轉(zhuǎn)</el-button>
? ? ? ? ? ? ? <el-button type="primary" plain @click="changeScale(1)">放大</el-button>
? ? ? ? ? ? ? <el-button type="primary" plain @click="changeScale(-1)">縮小</el-button>
? ? ? ? ? ? ? <el-button type="primary" @click="onCubeImg">上傳</el-button>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="rt">
? ? ? ? ? ? ? <el-button type="primary" @click="cancleCropper">取消</el-button>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </el-dialog>
? ? </div>
3.1js
data () {
? ? return {
? ? ? isShowCropper:false,
? ? ? fileImgList:[],
? ? ? option: {
? ? ? ? img: '', // 裁剪圖片的地址
? ? ? ? info: true, // 裁剪框的大小信息
? ? ? ? outputSize: 1, // 剪切后的圖片質(zhì)量（0.1-1）
? ? ? ? full: true, // 輸出原圖比例截圖 props名full
? ? ? ? outputType: 'png', // 裁剪生成額圖片的格式
? ? ? ? canMove: true,? // 能否拖動圖片
? ? ? ? original: false,? // 上傳圖片是否顯示原始寬高
? ? ? ? canMoveBox: true,? // 能否拖動截圖框
? ? ? ? autoCrop: true, // 是否默認(rèn)生成截圖框
? ? ? ? autoCropWidth: 200, // 默認(rèn)生成截圖框?qū)挾?/p>
? ? ? ? autoCropHeight: 200, // 默認(rèn)生成截圖框高度
? ? ? ? fixedBox: false // 截圖框固定大小
? ? ? },
? ? }
? },
components: { VueCropper },
beforeAvatarUploadPS(file) {
? ? ? this.option.img=URL.createObjectURL(file);
? ? ? const isDWG = file.name.split('.');
? ? ? const format = isDWG[isDWG.length - 1];
? ? ? // uploadParams.file="";
? ? ? if (format !="png" && format !="jpg") {
? ? ? ? this.$message.error('上傳文件只能是 png或jpg 格式!');
? ? ? ? return false;
? ? ? }
? ? ? this.isShowCropper = true;
? ? },
? ? // 然后我加了幾個剪切的按鈕進行旋轉(zhuǎn)或放大粤剧，并把上傳方法一并粘貼到如下：
? ? turnLeft() {
? ? ? this.$refs.cropper.rotateLeft();
? ? },
? ? turnRight() {
? ? ? this.$refs.cropper.rotateRight();
? ? },
? ? cancleCropper() {//取消截圖
? ? ? this.isShowCropper = false;
? ? },
? ? changeScale(num){
? ? ? num = num || 1;
? ? ? this.$refs.cropper.changeScale(num);
? ? },
? ? imgLoad (msg) {
? ? ? console.log('imgLoad')
? ? ? console.log(msg)
? ? },
? ? // 實時預(yù)覽函數(shù)
? ? realTime(data) {
? ? ? console.log('realTime')
? ? ? this.previews = data
? ? },
? ? onCubeImg() {//剪切上傳
? ? ? // 獲取cropper的截圖的base64 數(shù)據(jù)
? ? ? this.$refs.cropper.getCropData(data => {
? ? ? ? //先將顯示圖片地址清空杠茬，防止重復(fù)顯示
? ? ? ? // this.option.img = "";
? ? ? ? //將剪裁后base64的圖片轉(zhuǎn)化為file格式
? ? ? ? let file = this.convertBase64UrlToBlob(data);
? ? ? ? // this.fileImg=URL.createObjectURL(file);
? ? ? ? var formData = new FormData();
? ? ? ? formData.append("file", file);
? ? ? ? console.log(data)
? ? ? });
? ? },
? ? // 將base64的圖片轉(zhuǎn)換為file文件
? ? convertBase64UrlToBlob(urlData) {
? ? ? //去掉url的頭汇歹，并轉(zhuǎn)換為byte
? ? ? let bytes = window.atob(urlData.split(",")[1]);
? ? ? //處理異常,將ascii碼小于0的轉(zhuǎn)換為大于0
? ? ? let ab = new ArrayBuffer(bytes.length);
? ? ? let ia = new Uint8Array(ab);
? ? ? for (var i = 0; i < bytes.length; i++) {
? ? ? ? ia[i] = bytes.charCodeAt(i);
? ? ? }
? ? ? return new Blob([ab], { type: "image/jpeg" });
? ? },
? },
