Vant 中 Uplodaer 拍照并压缩图片

Vant 中 Uplodaer 拍照并压缩图片

引入uploader，这部分官网就有就不多说了

import Vue from 'vue';
import { Uploader } from 'vant';

Vue.use(Uploader);

使用，在使用前请阅读Uploader部分的API

<van-uploader 
v-model="uploader"
capture="camera" //图片选取模式，可选值为 camera (直接调起摄像头),默认是两者都有
multiple  //是否开启图片多选，部分安卓机型不支持
:max-count="1" //文件上传数量限制
:after-read="afterRead" />

二、调用压缩方法压缩图片

import { compressImage } from '@/assets/js/compressImage'// 图片压缩方法
export default {
  name:'residentRegister',
  data(){
    return{
      uploader: [],
      photo:''
    }
  },
  methods:{
    // 组件方法 获取 流
    afterRead(file) {
      let config = {
      width: 358, // 压缩后图片的宽
      height: 441, // 压缩后图片的高
      quality: 0.9 // 压缩后图片的清晰度，取值0-1，值越小，所绘制出的图像越模糊
      }
    //调用压缩方法
      compressImage(file.file, config).then(result => { // result 为压缩后二进制文件
          //返回压缩后的图片
          this.photo = result
      })
    },

    //计算base64格式的图片大小，这里我是用来方便测试的，可以删除
    getImgSize(base64url) {
      var str = base64url.replace('data:image/png;base64,', '');
      var equalIndex = str.indexOf('=');
      if(str.indexOf('=')>0) {
          str=str.substring(0, equalIndex);
      }
      var strLength=str.length;
      var fileLength=parseInt(strLength-(strLength/8)*2);
      var size = "";
      size = (fileLength / 1024).toFixed(2);
      var sizeStr = size + ""; 
      var index = sizeStr.indexOf(".");
      var dou = sizeStr.substr(index + 1, 2) 
      if (dou == "00") {               
        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
      }
      return size;
    }
  }
}

压缩图片的方法 新建

// 压缩图片
// eslint-disable-next-line no-unused-vars
export function compressImage (file, config) {
  // eslint-disable-next-line no-unused-vars
  let src
  // eslint-disable-next-line no-unused-vars
  let files
  // let fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2)
  const read = new FileReader()
  read.readAsDataURL(file)
  return new Promise(function (resolve, reject) {
    read.onload = function (e) {
      let img = new Image()
      img.src = e.target.result
      img.onload = function () {
        // 默认按比例压缩
        let w = config.width
        let h = config.height
        // 生成canvas
        let canvas = document.createElement('canvas')
        let ctx = canvas.getContext('2d')
        let base64
        // 创建属性节点
        canvas.setAttribute('width', w)
        canvas.setAttribute('height', h)
        ctx.drawImage(this, 0, 0, w, h)

        base64 = canvas.toDataURL(file['type'], config.quality)

        // 回调函数返回file的值（将base64编码转成file）
        // files = dataURLtoFile(base64) // 如果后台接收类型为base64的话这一步可以省略
        // 回调函数返回file的值（将base64转为二进制）
        // let fileBinary = dataURLtoBlob(base64)

        resolve(base64)
      }
    }
  })
};
// 将base64转为二进制  此方法我也没用到
function dataURLtoBlob (dataurl) {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
}

// base64转码（将base64编码转回file文件）  此方法我没用到
// eslint-disable-next-line no-unused-vars
function dataURLtoFile (dataurl) {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], { type: mime })
}

最后，这个压缩方法其实是我找到的最有效的压缩方法，因为之前使用的是另一种压缩方法，他的方法比较齐全，我在我和手机在电脑上测试都是没问题的，但是在ios上就发现有问题。ios不支持这种压缩方法，但是如果不考虑ios系统的话，这种压缩方法其实更好一点。