vue+elementUI(el-uproad)그림 압축,기본 같은 비례 압축 작업

다음 과 같다.

이 수 요 는 사용자 가 휴대 전화 촬영 사진 을 올 리 는 등 사진 크기 를 수정 하기 어 려 운 상황 에 대비 하여 10M 이내 의 사진 을 올 리 면 전단 에서 사진 을 압축 하여 백 엔 드 에 전송 하여 저장 할 수 있 습 니 다.element UI 의 el-uproad 구성 요소 와 결합 하여 이미지 업로드 기능 을 실현 할 수 있 습 니 다.(쉽게 말 하면 사용자 가 짱 입 니 다)
1.압축 방법 을 추출 하여 공공 방법.js 파일 에 넣 습 니 다.

/**     ，       
 * @param {Object} fileObj
 *     
 *          ，base64      
 */
export function compress(fileObj, callback) {
 try {
 const image = new Image()
 image.src = URL.createObjectURL(fileObj)
 image.onload = function() {
  const that = this
  //        
  let w = that.width
  let h = that.height
  const scale = w / h
  w = fileObj.width || w
  h = fileObj.height || (w / scale)
  let quality = 0.7 //        0.7
  //   canvas
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  //       
  const anw = document.createAttribute('width')
  anw.nodeValue = w
  const anh = document.createAttribute('height')
  anh.nodeValue = h
  canvas.setAttributeNode(anw)
  canvas.setAttributeNode(anh)
  ctx.drawImage(that, 0, 0, w, h)
  //     
  if (fileObj.quality && fileObj.quality <= 1 && fileObj.quality > 0) {
  quality = fileObj.quality
  }
  // quality   ，          
  const data = canvas.toDataURL('image/jpeg', quality)
  //         
  const newFile = convertBase64UrlToBlob(data)
  callback(newFile)
 }
 } catch (e) {
 console.log('    !')
 }
}
function convertBase64UrlToBlob(urlData) {
 const bytes = window.atob(urlData.split(',')[1]) //   url  ，    byte
 //     , ascii   0      0
 const ab = new ArrayBuffer(bytes.length)
 const ia = new Uint8Array(ab)
 for (let i = 0; i < bytes.length; i++) {
 ia[i] = bytes.charCodeAt(i)
 }
 return new Blob([ab], { type: 'image/png' })
}

2.el-uproad 업로드 구성 요소

<el-form-item ref="uploadElement" prop="picUrl" class="upload-img-form" label-width="0">
 <el-upload
 ref="uploadxls"
 class="avatar-uploader upload-img"
 :disabled="disabled"
 :auto-upload="false"
 :style="{height:'66px', backgroundImage:'url(' + dialogImageUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center', backgroundSize: '100%,100%'}"
 action="aaa"
 ::limit="1"
 :show-file-list="false"
 :on-change="handlePictureCardPreview"
 :before-upload="beforeupload"
 accept="image/png,image/gif,image/jpg,image/jpeg"
 >
 <!--<img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">-->
 <i v-if="!dialogImageUrl" class="el-icon-plus avatar-uploader-icon" />
 <!--<i v-show="!dialogImageUrl" class="upload-icon" />
 <div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">     </div>-->
 <div v-if="showDelete" class="remove-img"><i class="el-icon-delete" @click.stop="removeImg" /></div>
 <div slot="tip" class="el-upload__tip">
  <p><span style="color:#F5222D;">*</span>       </p>
  <p>  ：.jpg .png .gif       ：16:9，  10M</p>
 </div>
 </el-upload>
</el-form-item>

3.주로 handle PictureCard Preview 방법 에서 압축 방법 을 호출 합 니 다.
현재 vue 페이지 import 공공 js 파일
import { compress } from '@/utils'
그리고

//     
handlePictureCardPreview(file) {
 const _that = this
 const isLt10M = file.size / 1024 / 1024 < 10
 if (!isLt10M) {
 this.$message.error('           10M!')
 return false
 } else {
 this.dialogImageUrl = URL.createObjectURL(file.raw)
 compress(file.raw, function(val) {
  _that.theForm.picUrl = val
  _that.imgFile = val
  _that.showDelete = true
  _that.$refs['addBuildingForm'].validateField('picUrl')
 })
 }
}

copress 는 file.raw 를 fileObj 로 전송 합 니 다.
이렇게 사진 만 올 리 면 압축 을 해 요.
추가 지식:element upload 제한 업로드 이미지 크기,크기,비율
긴 말 안 할 게 요.그냥 코드 보 세 요~

//      
  public async beforeUpload(file: any) {
    const is1M = file.size / 1024 / 1024 < 3; //     3M
    if (!is1M) {
      this.$message.error('         270 x 270，      3MB，   1:1');
      return false;
    } else {
      const isSize = new Promise((resolve, reject) => {
        const width = 270;
        const height = 270;
        const _URL = window.URL || window.webkitURL;
        const img = new Image();
        img.onload = () => {
          const valid = img.width >= width && img.height >= height && img.width === img.height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error('         270 x 270，      3MB，   1:1');
          return Promise.reject();
        },
      );
      return isSize;
    }
  }

많이 봤 으 니까 자기가 하 나 를 훑 는 게 낫 겠 다.
이 vue+element UI(el-uproad)그림 압축 은 기본적으로 같은 비례 의 압축 작업 이 여러분 에 게 공 유 된 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 께 서 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.