逻辑大概:
1. 取到input type="file" 文件流 ( onchange事件内会返回 )
2.然后使用 new FileReader() 对象的 readAsDataURL(file) 方法把文件流转换成base64格式
3.最后使用canvas里面的方法进行压缩 (压缩完会返回一个base64格式图片)
1 //获取input 2 let dom = document.getElementById('test-input') 3 //绑定onchange事件 4 dom.onchange = function(event) { 5 //在选择文件之后触发该方法,获取到文件流变量,数组类型 6 var files = event.target.files 7 } 8 9 //比如只需要第一张图片 10 var singleFile = files[0] 11 12 //转码 使用 FileReader 13 var reader = new FileReader(); 14 15 //singleFile单个文件流作为参数传入进行解析 16 reader.readAsDataURL(singleFile) 17 18 //reader在onload事件里就会返回解析后的base64格式 19 reader.onload = function(){ 20 var resBase64 = this.result; 21 } 22 23 //接下来就是通过canvas来解析了 24 //首先得创建一个image对象存放之前解析的base64 25 var img = new image(); 26 img.src = resBase64 27 img.onload = function() { 28 //在确保img加载完成后执行代码 29 //创建一个canvas和画布 30 var canvas = document.createElement('canvas') 31 var ctx = canvas.getContext('2d') 32 //重新计算图片的宽度高度分辨率 33 //因为img加载完成,所以可以直接获取到原始的图片宽高 34 var wid = this.width 35 var hei = this.height 36 //计算他的比例 37 var rate = wid/hei 38 //因为拍摄的图片比较大,所以需要按比例进行缩小 39 //我这里给定了,让他的宽为700, 40 wid = 700 41 hei = 700 / rate 42 //然后给canvas的宽高赋计算后的值 43 canvas.width = wid 44 canvas.height = hei 45 //开始画 46 ctx.drawImage(this, 0, 0, wid, hei); 47 48 49 var quality = 1 //值越小越模糊 50 //生成base64 51 var calBase64 = canvas.toDataURL('image/jpeg', quality); 52 }