js:

var eleFile = document.querySelector(‘#file‘);
// 壓縮圖片需要的一些元素和對象
var reader = new FileReader();
var imga=document.getElementById(‘imga‘);
var  img = new Image();
// base64地址圖片加載完畢後      
     img.onload = function() {
         var originWidth = this.width, //image resize   壓縮後的寬
         originHeight=this.height,
         maxWidth = 400, maxHeight = 400,
         quality = 0.8, //image quality  壓縮質量
         canvas = document.createElement(‘canvas‘),
         drawer = canvas.getContext("2d");
         canvas.width = maxWidth;
        canvas.height = originHeight/originWidth*maxWidth;
          drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
          //上傳到七牛雲base64
          var base64 = canvas.toDataURL("image/jpeg", quality); // 這裏就拿到了壓縮後的base64圖片
          //console.log(base64);
          //blob對象
          canvas.toBlob(function(blob){
              //console.log(blob)
          }, "image/jpeg", quality);
          var file = dataURLtoFile(base64, ‘name‘);
          console.log(file);
          imga.src=base64;

      };
 //base64轉file
//filename圖片的名字dataurl是base64地址
 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 File([u8arr], filename, {type:mime});
}

// 文件base64化，以便獲知圖片原始尺寸
reader.onload = function() {
    //reader.result就是base64
    img.src = reader.result;
};
//addEventListener監聽change事件
eleFile.addEventListener(‘change‘, function () {
    file = this.files[0];
    // 選擇的文件是圖片
    if (file.type.indexOf("image") == 0) {
        //console.log(file);
        reader.readAsDataURL(file); //以數據url的方式讀取文件內容
         
    }
});
html：

<input id="file" type="file">
<img id="imga" src="" >

js圖片壓縮並上傳？