这篇文章给大家介绍的内容是关于js上传图片压缩，有着一定的参考价值，有需要的朋友可以参考一下。
js实现图片压缩后上传用到的技术:
canvas相关api
html5的一些api
兼容性:
h5没发现问题,pc低版本浏览器不支持
实现思路:
监听文件域的上传,通过filereader api获取到图片的原始数据
计算压缩后的宽高,然后通过画到canvas上在截取出压缩后的数据
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title></head><body> <input type="file" id="file"> <canvas id="canvas"></canvas></body></html><script> // 兼容性 h5上可以使用,pc低版本浏览器不支持 // 准备要用到的img和canvas var img = new image(), canvas; // 创建读取文件对象 var render = new filereader(); // 如果不需要放在页面上,使用js创建该元素就可以了 // canvas = document.createelement('canvas'); // 找到canvas,准备画图 var canvas = document.getelementbyid('canvas'); var context = canvas.getcontext('2d'); var input = document.getelementbyid('file'); input.addeventlistener('change', function (e) { // 通过files获取到当前文件 var file = e.target.files[0]; // 如果选择的是图片 if (file.type.indexof('image') != -1) { // 读取file文件,得到的结果为base64位 render.readasdataurl(file); }; }); render.onload = function (result) { // 把读取到的base64图片设置给img的src属性 var src = render.result; img.src = src; }; img.onload = function () { // 加载完毕后获取图片的原始尺寸 var origin_width = this.width; var origin_height = this.height; // 设置最大允许宽高,根据需求自己设置,值越大,图片大小越大 var max_width = 400; var max_height = 400; // 最终宽高 var target_width = origin_width; var target_height = origin_height; if (origin_width > max_width || origin_height > max_height) { if (origin_width / origin_height > max_width / max_height) { // 更宽，按照宽度限定尺寸 target_width = max_width; target_height = math.round(max_width * (origin_height / origin_width)); } else { target_height = max_height; target_width = math.round(max_height * (origin_width / origin_height)); } } canvas.width = target_width; canvas.height = target_height; // 绘画到画布上 context.drawimage(img, 0, 0, target_width, target_height); /* 此处得到的是blob对象,blob对象是在ie10及以上才兼容,在ios8_1_1上和iphonese上有兼容问题 canvas.toblob(function(result) { console.log(result); }); */ // 读取canvas的数据 var result = canvas.todataurl(); // 得到的结果是base64位的字符串,拿到压缩后的值通过网络请求交给后台处理... // 如果是blob对象,需要通过formdata对象发送 console.log(result); };</script>
相关推荐：
js中字符串的全排列的算法解析
react的使用：react组件内部的状态管理
js中类的扩充及面向对象的技术解析
以上就是js如何实现将上传图片并且压缩的方法的详细内容。