前端vue实现图片压缩并且将其转换为jpg格式图片

序言

    最近接到一个需求，要求前端把图片压缩在传给后端，并且要将图片转换为jpg格式的。经过百度查询了很多方法，都不是很理想。最后还是通过组件来实现了。

首先是原生的方法 （不推荐）

    这个方法对于仅仅有jpg图片的项目很是好用，而且十分方便，原理就是通过传进来的图片的file流文件，用canvas来绘制出来，返回出来的b64格式的文件，在把其本身处理为file流。在发送给后端就好了。

/**
 * @desc：前端实现图片压缩
 * @desc：只对jpg图片生效-对PNG图片效果甚微
 */

function dataURLtoFile( urlData, fileName ) {
  let arr = urlData.split( ',' );
  let mime = arr[ 0 ].match( /:(.*?);/ )[ 1 ];
  let bytes = atob( arr[ 1 ] ); // 解码base64
  let n = bytes.length
  let ia = new Uint8Array( n );
  while ( n-- ) {
    ia[ n ] = bytes.charCodeAt( n );
  }
  return new File( [ ia ], fileName, { type: mime } );
}
//压缩图片
function compressImg( file ) {
  //支持压缩的格式
  const reg = /\.(png|jpg|gif|jpeg|webp|PNG|JPG|JPEG)$/
 //(reg.test( file.name ) )
  if ( reg.test( file.name ) ) {
    var name = file.name
    var src
    var files
    var fileSize = parseFloat( parseInt( file[ 'size' ] ) / 1024 / 1024 ).toFixed( 2 );
    var read = new FileReader()
    read.readAsDataURL( file )
    return new Promise( function ( resolve, reject ) {
      read.onload = function ( e ) {
        var img = new Image();
        img.src = e.target.result;
        img.onload = function () {
          //默认按比例压缩
          var w = this.width,
            h = this.height;
          //生成canvas
          var canvas = document.createElement( 'canvas' );
          var ctx = canvas.getContext( '2d' );
          var base64;
          // 创建属性节点
          canvas.setAttribute( "width", w );
          canvas.setAttribute( "height", h );
          ctx.drawImage( this, 0, 0, w, h );
          if ( fileSize ) {
            //所有图片压缩一半
            base64 = canvas.toDataURL( file[ 'type' ],0.1);
          }
          // 回调函数返回file的值（将base64编码转成file）
          files = dataURLtoFile( base64, name ); //如果后台接收类型为base64的话这一步可以省略
          // 以服务的方式调用的 Loading 需要异步关闭
          // setTimeout( () => {
            // loadingInstance.close()
          // }, 500 )
         //("files",files)
          resolve( files )
        }
      }
    } )
  }
  else {
    return new Promise( function ( resolve, reject ) {
      // setTimeout( () => {
        // loadingInstance.close()
      // }, 500 )
      resolve( file )

    } )
  }
};
//结尾处将该方法暴露出来供外部调用
export default {
  compressImg,
}
//使用方式 回调的方式使用其方法
this.$compressImage.compressImg(file)
　　.then(res=> { // res为压缩后二进制文件
　　　 console.log(res)
　　}) 

其次是组件的方法 （推荐）

    组件的方法就很简单，也很好用，同时支持png和jpg格式的图片，不管是什么图都可以压缩为对应比例的大小。组件名字为imageConversion

1. 安装
     npm i image-conversion --save
2. 引入

// 图片压缩
//引入组件
import * as imageConversion from 'image-conversion'
//注册组件
Vue.prototype.$imageConversion = imageConversion
//图片验证方法
Vue.prototype.$ImgCompress = ImgCompress
//图片压缩比计算方法
Vue.prototype.$ImgFormat = ImgFormat
//将png图片转换为jpg图片 抛出file流文件
Vue.prototype.$PngGoImg = PngGoImg
//将png图片名字转换为jpg图片名字 抛出转换好的名字
Vue.prototype.$PngGoImgB = PngGoImgB

/**
 * @desc：图片压缩相关方法
 */
//图片压缩比计算。 传入图片原sizi大小 与b 计算  算出其百分比大小，抛出告诉组件不可超过其百分比大小
export function ImgCompress( a, b = 0.3 ) {
  return Math.ceil( a / 1024 ) * b < 300 ? 300 : Math.ceil( a / 1024 ) * b
}

//图片格式满足则抛出 true 否则抛出 false
export function ImgFormat( a ) {
  const reg = /\.(png|jpg|jpeg)$/
  return reg.test( a.toLowerCase() )
}
//PNG转换jpg并且抛出转换完成的file流 若非png则直接抛出file
export function PngGoImg( a ) {
  let e = a.name.substring( a.name.length - 4 )
  if (  e.toLowerCase() === '.png' ) {
    let b = a.name.substring( 0, a.name.length - 4 )
    let c = b + '.jpg'
    let d = new File( [ a ], c, {
      type: a.type,
      lastModified: Date.now(),
    } )
    return d
  } else {
    return a
  }
}
//PNG转换jpg并且抛出转换完成的图片Name 若非png 则直接抛出图片Name
export function PngGoImgB( a ) {
  let e = a.substring( a.length - 4 )
  if ( e.toLowerCase() === '.png') {
    let b = a.substring( 0, a.length - 4 )
    let c = b + '.jpg'
    return c
  } else {
    return a
  }
}

3. 使用

//在图片上传之前执行此方法
 beforeUpload(imgfile) {
      //第一步把拿到的图片是png的图片的file流转换为jpg的图片。
      let file = this.$PngGoImg(imgfile)
      //判断其是否为图片，不是图片则不执行图片压缩
      if (this.$ImgFormat(file.name)) {
        return new Promise((resolve, reject) => {
          //异步回调的方式将图片的file流及图片的压缩比传进组件内部
          this.$imageConversion.compressAccurately(file, this.$ImgCompress(file.size))
            .then((res) => {
              res = new File([res], file.name, {
                type: res.type,
                lastModified: Date.now(),
              })
          //res就是转换并且压缩过的图片
            }
            })
        })
      } else {
        //直接抛出文件的file流
      }
    },

更新于2021-03-25-13点48分