JS 上傳圖片壓縮，原比例壓縮

復制 粘貼 改吧改吧就可用，原生js

var fileObj = file.file;//原文件   file是我用vue-vant里的組件，里邊有file(原文件)和content(base64)  其它寫法自行百度，都是可以拿到原文件的
if(fileObj && fileObj.size && fileObj.size > 1024*1024){//判斷是否大於1MB
　　let cal = 1024*1024/fileObj.size; //計算比例，也可以自己定義比例 0.5等等
　　let reader = new FileReader();
   reader.readAsDataURL(fileObj);
   reader.onload = function(e) {
       let image = new Image(); //新建一個img標簽（不嵌入DOM節點，僅做canvas操作)
       image.src = file.content; //file是我用vant里的組件，里有轉好的base64格式content
       image.onload = function() {    //圖片加載完畢后再通過canvas壓縮圖片，否則圖片還沒加載完就壓縮，結果圖片是全黑的
           let canvas = document.createElement('canvas'), //創建一個canvas元素
           context = canvas.getContext('2d'),    //context相當於畫筆，里面有各種可以進行繪圖的API
           imageWidth = image.width*cal,    //壓縮后圖片的寬度
           imageHeight = image.height*cal,    //壓縮后圖片的高度
           dataImg = ''    //存儲壓縮后的圖片  這個我想刪除，但我頁面上報警告了，下來我再看看，不影響壓縮動作
           canvas.width = imageWidth    //設置繪圖的寬度
           canvas.height = imageHeight    //設置繪圖的高度
           //使用drawImage重新設置img標簽中的圖片大小，實現壓縮。drawImage方法的參數可以自行查閱W3C
           context.drawImage(image, 0, 0, imageWidth, imageHeight)
           //使用toDataURL將canvas上的圖片轉換為base64格式
           fileObj = canvas.toDataURL('image/jpeg')
           console.log(fileObj，'這是轉化成的base64格式，也可進行upload-ajax上傳請求');
       }
    }
}
let formData = new Formata();
formData.append('file', fileObj) //寫自己的對應的參數名稱
//請求ajax進行上傳
ajax...............