<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script></head><body><input type="file" ?id="picFile" onchange="readFile(this)"/> ??<img style="" id="img" src="" ?/><script>function readFile(obj){ ??var file = obj.files[0]; ?????//判断类型是不是图片 ??if(!/image\/\w+/.test(file.type)){ ????????????????????alert("请确保文件为图像类型"); ??????????????????return false; ???} ???var reader = new FileReader(); ???reader.readAsDataURL(file); ???reader.onload = function(e){ ???????dealImage(this.result,{width:200},function(base){ ??????? document.getElementById(‘img‘).setAttribute(‘src‘,base) ???????}); ?} ??} ?/** * 图片压缩，默认同比例压缩 * @param {Object} path ?* ??pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径 * @param {Object} obj * ??obj 对象 有 width， height， quality(0-1) * @param {Object} callback * ??回调函数有一个参数，base64的字符串数据 */function dealImage(path, obj, callback){ var img = new Image(); img.src = path; img.onload = function(){ ?var that = this; ?// 默认按比例压缩 ?var w = that.width, ??h = that.height, ??scale = w / h; ??w = obj.width || w; ??h = obj.height || (w / scale); ?var quality = 0.7; ?// 默认图片质量为0.7 ?//生成canvas ?var canvas = document.createElement(‘canvas‘); ?var ctx = canvas.getContext(‘2d‘); ?// 创建属性节点 ?var anw = document.createAttribute("width"); ?anw.nodeValue = w; ?var anh = document.createAttribute("height"); ?anh.nodeValue = h; ?canvas.setAttributeNode(anw); ?canvas.setAttributeNode(anh); ??ctx.drawImage(that, 0, 0, w, h); ?// 图像质量 ?if(obj.quality && obj.quality <= 1 && obj.quality > 0){ ??quality = obj.quality; ?} ?// quality值越小，所绘制出的图像越模糊 ?var base64 = canvas.toDataURL(‘image/jpeg‘, quality ); ?// 回调函数返回base64的值 ?callback(base64); }}</script></body></html>
js上传图片并压缩
原文地址：https://www.cnblogs.com/chaser-li/p/8257762.html