base64 转码 压缩 上传

let base64= "data:image/jpeg;base64," + rsp;

let blob = dataURLtoFile(base64,'uploadbackimg');

base64 格式 转化为 文件格式

//dataurl是base64格式的字符串，filename是你要命名的文件名
function dataURLtoFile(dataurl,filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
};

// 图片上传

function handleInputChange(file) {
  //let file = document.getElementById('fileupload').files[0];    //读取文件
  let size = 1024 * 1024 * 20; // 5MB
  // 检查文件类型
  if (['jpg', 'jpeg', 'png', 'gif'].indexOf(file.type.split("/")[1]) < 0) {
    // 自定义报错方式
    mui.toast('请上传图片', {
      durtaion: 200
    });
    return;
  }
  // 文件大小限制
  if (file.size > size) {
    // 文件大小自定义限制
    mui.toast('图片过大上传失败！', {
      durtaion: 200
    });
    return;
  }

  var formData = new FormData();
  formData.append('fileType', "image");
  formData.append('name', "fileupload");
  formData.append('IsImageCut', true);
  formData.append('file', file);
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {

    if (xhr.readyState === 4) {
      // 字符串 转 json
      let data = JSON.parse(xhr.responseText);

      var img = data.pic; // 返回图片路径 url

      if (img == null || img == undefined || img == "undefined" || img == '') {
        mui.toast("图片上传失败！");
        return false;
      }   
      var _url = data.pic + "?imageView2/1/w/100/h/100"; // 七牛云图片质量 设置参数
      document.getElementById("backImg").src = _url;
      mui.toast("上传图片成功！");
    }

  };
  xhr.open('POST', '', true);
  xhr.send(formData);
}

图片压缩

function dataUrlResizetoFile(dataurl,quality,fn){
    dataURLtoImage(dataurl,function(image){
        canvasResizetoFile(imagetoCanvas(image),quality,fn);
    })
}


function dataURLtoImage(dataurl,fn){
    var img = new Image();
    img.onload = function() {
        fn(img);
    };
    img.src = dataurl;
};


function canvasResizetoFile(canvas,quality,fn){
    canvas.toBlob(function(blob) {
        fn(blob);
    },'image/jpeg',quality);
};

function imagetoCanvas(image){
    var cvs = document.createElement("canvas");
    var ctx = cvs.getContext('2d');
    cvs.width = image.width;
    cvs.height = image.height;
    ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
    return cvs ;
};