Vue使用mixins实现压缩图片代码

本文介绍了vue使用mixins实现压缩图片代码，分享给大家，具体如下：

图片压缩

创建mixins image-compress.js

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});
  }

 }
};

example

<template>
  ...
</template>
<script>
 import imageuploadmixins from '@/mixins/image-compress'; 
 export default { 
  mixins: [imageuploadmixins],  
  ...  
  methods:{
    handleuploadimage(e){
      let file = e.target.files[0];
      this.checkandhandlecompression(file).then( fileoptions => {
        // let {uploadsrc, uploadfile} = fileoptions;
        
        // 压缩完成使用 uploadsrc, uploadfile
        
        ...
        
      });
    }
  }
   ...  
 }
</script>
<style>
  ...
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。