H5拍照上传，微信接口获取照片

微信

WxConfig.initConfig();
        // 设置头像
        /* eslint-disable */
        wx.ready(function() {
          wx.checkJsApi({
            jsApiList: ['chooseImage', 'getLocalImgData'],
            success: function (res) {
              wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                  var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                  wx.getLocalImgData({
                    localId: localIds[0].toString(),
                    success: function (res) {
                      const localData = res.localData;
                      let imageBase64 = '';
                      if (localData.indexOf('data:image') == 0) {
                        //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                        imageBase64 = localData;
                      } else {
                        //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                        //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                        imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
                      }
                      if(base64ImageSize(imageBase64) > 2 || base64ImageSize(imageBase64) < 0.02){
                        that.$toast('上传图片要大于20K小于2M!');
                        return;
                      }
                      that.userInfo.avator = imageBase64;
                      that.handleAvatar(imageBase64);
                    }
                  });
                },
                fail(err) {
                  console.log('调用摄像头失败', err);
                }
              });
            },
            fail: function() {
              that.$toast('暂不支持修改头像!');
            },
          });
        });
        wx.error(function(res) {
          // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，
          // 也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
          console.log(res);
        });
--------------------------------------------------
export default {
  initConfig: function () {
    var api = '/wx/wxMpAuth/createJsapiSignature'; // 接口地址
    var url = window.location.href;
    request({
      url: api,
      method: 'post',
      data: url,
    }).then((res) => {
      var getMsg = res.data;
      wx.config({
        debug: false, // 生产环境需要关闭debug模式
        appId: getMsg.appId, // appId通过微信服务号后台查看
        timestamp: getMsg.timestamp, // 生成签名的时间戳
        nonceStr: getMsg.nonceStr, // 生成签名的随机字符串
        signature: getMsg.signature, // 签名
        jsApiList: ['chooseImage', 'getLocalImgData',
          // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
          'updateAppMessageShareData',
          'updateTimelineShareData',
        ],
        openTagList: ['wx-open-launch-weapp']
      });
    })
  },
};

H5拍照上传

import { compressImgBySize, base64ImageSize } from '@/utils/compressImg';

<b-popup ref="headPopup" :isPad="false">
      <div class="btn size16 t00A1E2" style="position: relative">
        <div class="btn size16 t00A1E2" style="position: absolute;">拍照</div>
        <input style="opacity: 0;width: 100%;" type="file" name="file" accept="image/*" capture="camera" @click="clickPhoto" @change="takePhoto($event)">
      </div>
      <hr class="hr" />
      <div class="btn size16 t00A1E2" style="position: relative">
        <div class="btn size16 t00A1E2" style="position: absolute;">从手机相册选择</div>
        <input style="opacity: 0;width: 100%;" type="file" accept="image/*" @click="clickPhoto" @change="takePhoto($event)" name="file">
      </div>
    </b-popup>

async takePhoto(e) {
      //拍照功能---上传头像
      var file = e.target.files[0];//获取文件对象
      let imageBase64 = await changeFileIntoBase64(file);
      imageBase64 = await compressImgBySize(imageBase64, 1024);
      if(base64ImageSize(imageBase64) > 2 || base64ImageSize(imageBase64) < 0.02){
        this.$toast({
          message: '上传图片要大于20K小于2M!',
          duration: 5000
        });
        return;
      }
    },


/**
 * @description 转换文件成base64数据
 * @param {Object} file - 文件对象
 */
export function changeFileIntoBase64(file) {
  return new Promise((resolve, reject) => {
    const fr = new FileReader();
    fr.readAsDataURL(file);
    fr.onload = (result) => {
      const base64Str = result.currentTarget.result;
      resolve(base64Str);
    };
  });
}

compressImg.js
/* eslint-disable */
/**
 * 压缩图片到指定大小
 * @param baseImg base64图片
 * @param maxSize 单位kb
 */
export function compressImgBySize (baseImg, maxSize = 200) {
  return new Promise((resolve) => {
    // 计算图片大小
    const strLength = baseImg.length
    const fileLength = parseInt(strLength - (strLength / 8) * 2)
    let size = parseInt((fileLength / 1024).toFixed(2))

    // 判断图片是否符合指定大小要求
    if (size <= maxSize) {
      resolve(baseImg)
      return
    }

    // 创建image对象
    const img = new Image()
    if (baseImg.indexOf('data:image/') !== -1) {
      img.src = baseImg
    } else {
      img.src = 'data:image/jpeg;base64,' + baseImg
    }

    img.onload = () => {
      // 把image对象 转换为 canvas对象
      const canvas = imgToCanvas(img)
      let resUrl = ''
      // 图片质量，范围：0 ~ 1
      let quality = 0.9

      // 当图片大小大于指定maxSize，图片质量大于0时继续通过降低图片资料来压缩
      while (size > maxSize && quality > 0) {
        // 在canvas上绘制该HTMLImageElement，得到图片base64
        resUrl = canvas.toDataURL('image/jpeg', quality).replace(/^data:image\/\w+;base64,/, '')
        const resLength = resUrl.length
        // 计算绘制出的base64图片大小
        const resFileLength = parseInt(resLength - (resLength / 8) * 2)
        size = parseInt((resFileLength / 1024).toFixed(2))
        // 降低图片质量
        quality = (quality - 0.1).toFixed(1)
      }
      resolve('data:image/jpeg;base64,' + resUrl)
    }
    img.onerror = () => {
      resolve(baseImg)
    }
  })
}

// 把image 转换为 canvas对象
export function imgToCanvas (image) {
  var canvas = document.createElement('canvas')
  canvas.width = image.width
  canvas.height = image.height
  canvas.getContext('2d').drawImage(image, 0, 0)
  return canvas
}
// 获取base64图片大小
export function base64ImageSize(base64ImageStr) {
  const indexBase64 = base64ImageStr.indexOf('base64,');
  if (indexBase64 < 0) return -1;
  const str = base64ImageStr.substr(indexBase64 + 6);
  return (str.length * 0.75 / 1024 / 1024).toFixed(2);
}