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...............