自己总结的:常用正则记录 及 base64上传压缩功能

一。常用正则

1.身份证号正则

let reg =/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

2.输入框禁止表情正则

let reg =/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g;/

3.固定电话正则

let reg = /^\d{3}-\d{7,8}|\d{4}-\d{7,8}$/

4.手机号码正则

let reg = /^\d{3}-\d{7,8}|\d{4}-\d{7,8}$/;

二.关于base64 的压缩

1.取到base64先要判断 图片是web/jepg/png等

2.取base64字节长度 转换成对应的 kb 或者Mb,便于处理

//获取base64图片大小 转换成kb 和Mb
export const getImgSize = (val) => {
  let str;
  if (val.indexOf('data:image/jpeg;base64') != -1) {
    str = val.replace('data:image/jpeg;base64,', ''); //这里根据自己上传图片的格式进行相应修改
  } else if (val.indexOf('data:image/png;base64') != -1) {
    str = val.replace('data:image/png;base64,', ''); //这里根据自己上传图片的格式进行相应修改
  } else if (val.indexOf('data:image/webp;base64') != -1) {
    str = val.replace('data:image/webp;base64,', ''); //这里根据自己上传图片的格式进行相应修改
  }
  let strLength = str.length;
  let fileLength = parseInt(strLength - (strLength / 8) * 2);
  // 由字节转换为KB
  let size1, size2;
  size1 = (fileLength / 1024).toFixed(2);
  size1 > 1024 ? (size2 = (size1 / 1024).toFixed(2) + 'M') : (size2 = size1 + 'k');
  return size2;
};

3.根据 base64转换的得到的大小来判断缩放倍率

//压缩倍率
export const yaFile = (val) => {
  let base64Size = getImgSize(val);
  console.log(base64Size, '字节流大小');
  let lengthNum1 = base64Size.indexOf('M');
  let lengthNum2 = base64Size.indexOf('k');
  let w, num1, num2;
  if (lengthNum1 != -1) {
    num1 = base64Size.substring(0, lengthNum1);
    if (num1 <= 2) {
      w = 400;
    } else if (num1 > 2 && num1 <= 3) {
      w = 400;
    } else if (num1 > 3) {
      w = 400;
    }
  } else if (lengthNum2 != -1) {
    num2 = base64Size.substring(0, lengthNum2);
    if (num2 <= 300) {
      w = 600;
    } else if (num2 > 300 && num2 <= 600) {
      w = 500;
    } else if (num2 > 600) {
      w = 400;
    }
  }
  console.log(w, num2, num1, '图片缩放倍数');
  let newImage = new Image();
  let imgWidth, imgHeight;
  let promise = new Promise(resolve => (newImage.onload = resolve));
  newImage.src = val;
  return promise.then(() => {
    imgWidth = newImage.width;
    imgHeight = newImage.height;
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    if (Math.max(imgWidth, imgHeight) > w) {
      if (imgWidth > imgHeight) {
        canvas.width = w;
        canvas.height = (w * imgHeight) / imgWidth;
      } else {
        canvas.height = w;
        canvas.width = (w * imgWidth) / imgHeight;
      }
    } else {
      canvas.width = imgWidth;
      canvas.height = imgHeight;
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
    let base64 = canvas.toDataURL("image/png");
    return base64;
  });
};

4.一般是放在common.js里面,当做公共方法使用,按需引入。

import { yaFile } from "../js/common";

在外部使用:

//获取压缩后的base64
async getFileBase64(val) {
  //val,'数据源'
  let base64Data = await yaFile(val).then((res) => {
      return res;
   });
  return base64Data;
},

返回 压缩过的 base64 字符串,通过接口。提交给后端。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值