van-uploader图片压缩

ZJUAllen

于 2024-08-14 02:28:59 发布

阅读量75

点赞数

文章标签： android

Uploader组件的before-read函数中，对文件做检验和压缩
将文件转为图片对象，然后获取图片的宽高
在canvas上重新以新的宽高等比例缩小绘制
canvas转二进制文件转文件返回

使用组件提供beforeRead方法，在该方法中进行校验：

const asyncBeforeRead = (file) =>
  new Promise((resolve, reject) => {
    if (!file.type.startsWith('image/')) {
      // 非图片文件
      Toast('请上传图片');
      reject();
    } else {
      // 文件压缩, imgCompress方法往下看
      imgCompress(file)
        .then(f => {
          resolve(f);
        })
    }
  });

压缩方法imgCompress：

/**
 * @name 文件压缩
 * @description
 *  1、将文件转img对象
 *  2、获取文件宽高比例
 *  3、自定义等比例缩放宽高属性，这里我用的是固定800宽度，高度是等比例缩放
 *  4、canvas重新绘制图片
 *  5、canvas转二进制对象转文件对象，返回
 * @returns { File } 文件
 */
function imgCompress () {
  // 将文件转img对象
  const img = await fileToImg(file)
  return new Promise((resolve, reject) => {
    const canvas = document.createElement('canvas')
    const context = canvas.getContext('2d')
    // 获取文件宽高比例
    const { width: originWidth, height: originHeight } = img
    // 自定义等比例缩放宽高属性，这里我用的是固定800宽度，高度是等比例缩放
    const scale = +(originWidth / originHeight).toFixed(2) // 比例取小数点后两位)
    const targetWidth = 800 // 固定宽
    const targetHeight = Math.round(800 / scale) // 等比例缩放高
 
    canvas.width = targetWidth
    canvas.height = targetHeight
    context.clearRect(0, 0, targetWidth, targetHeight)
    // canvas重新绘制图片
    context.drawImage(img, 0, 0, targetWidth, targetHeight)
    // canvas转二进制对象转文件对象，返回
    const type = 'image/png'
    canvas.toBlob(function (blob) {
      const f = new File([blob], file.name, {
        type,
        lastModified: file.lastModified
      })
      resolve(f)
    }, type)
  })
}
 
// file转换成img对象
function fileToImg (file) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    const reader = new FileReader()
    reader.onload = function (e) {
      img.src = e.target.result
    }
    reader.onerror = function (e) {
      reject(e)
    }
    reader.readAsDataURL(file)
    img.onload = function () {
      resolve(img)
    }
    img.onerror = function (e) {
      reject(e)
    }
  })
}