欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-28 10:21:09
本文介绍了vue使用mixins实现压缩图片代码,分享给大家,具体如下: 图片压缩 创建mixins image-compress.js export...

本文介绍了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>

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