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