Vue는 믹스인을 사용하여 압축된 이미지 코드를 구현합니다.

이 글에서는 주로 Vue의 믹스인을 사용하여 이미지 코드를 압축하는 방법을 소개하고 참고하겠습니다.

이 기사에서는 이미지 코드를 압축하기 위한 Vue의 믹스인 사용을 소개합니다. 자세한 내용은 다음과 같습니다.

Image 압축

Create mixins image-compress.js

example

export default {

 methods: {
  /**
   * 检查并压缩图片大小
   */
  checkAndHandleCompression(file) {

   return new Promise((resolve, reject) => {

    this.imgBase64(file, (image, canvas) => {
     let maxSize = 2 * 1024; // 2M (单位KB)
     let fileSize = file.size / 1024; // 图片大小 (单位KB)

     let uploadSrc, uploadFile;
     if (fileSize > maxSize) { // 如果图片大小大于maxSize，进行压缩
      uploadSrc = canvas.toDataURL(file.type, maxSize / fileSize);
      uploadFile = this.convertBase64UrlToFile(uploadSrc, file.name); // 转成file文件
     } else {
      uploadSrc = image.src;
      uploadFile = file;
     }

     let compressedSize = uploadFile.size / 1024;// 压缩后图片大小 (单位KB)
     // 判断图片大小是否小于maxSize，如果大于则继续压缩至小于为止
     if (compressedSize.toFixed(2) > maxSize) {
      this.checkAndHandleUpload(uploadFile);
     } else {
      let fileOptions = {uploadSrc, uploadFile};
      resolve(fileOptions);
     }
    });

   });

  },

  /**
   * 将图片转化为base64
   */
  imgBase64(file, callback) {
   // 看支持不支持FileReader
   if (!file || !window.FileReader) return;
   // 创建一个 Image 对象
   let image = new Image();
   // 绑定 load 事件处理器，加载完成后执行
   image.onload = function () {
    // 创建 canvas DOM 对象
    let canvas = document.createElement('canvas');
    // 返回一个用于在画布上绘图的环境, '2d' 指定了您想要在画布上绘制的类型
    let ctx = canvas.getContext('2d');
    // 如果高度超标 // 参数，最大高度
    let MAX_HEIGHT = 3000;
    if (image.height > MAX_HEIGHT) {
     // 宽度等比例缩放 *=
     image.width *= MAX_HEIGHT / image.height;
     image.height = MAX_HEIGHT;
    }
    // 获取 canvas的 2d 环境对象,
    // 可以理解Context是管理员，canvas是房子
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 重置canvas宽高
    canvas.width = image.width;
    canvas.height = image.height;
    // 将图像绘制到canvas上
    ctx.drawImage(image, 0, 0, image.width, image.height);

    callback(image, canvas);

   };
   if (/^image/.test(file.type)) {
    // 创建一个reader
    let reader = new FileReader();
    // 将图片将转成 base64 格式
    reader.readAsDataURL(file);
    // 读取成功后的回调
    reader.onload = function () {
     // 设置src属性，浏览器会自动加载。
     // 记住必须先绑定事件，才能设置src属性，否则会出同步问题。
     image.src = this.result;
    };
   }
  },

  /**
   * 把Base64转换成file文件
   */
  convertBase64UrlToFile(dataurl, filename) {
   let arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length,
    u8arr = new Uint8Array(n);
   while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
   }
   return new File([u8arr], filename, {type: mime});
  }

 }
};

위 내용은 모두를 위해 정리한 내용입니다. 네, 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

vue 데이터 제어 보기 소스 코드 분석

React 상위 구성 요소에 대한 간략한 논의

vue-cli axios 요청 방법 및 도메인 간 처리 문제

위 내용은 Vue는 믹스인을 사용하여 압축된 이미지 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!