对上传图片进行的压缩

2019-04-15 18:01发布

站内文章 / PIC单片机
13082 0 1710
代码： html代码：
var fileDom = document.getElementById("upload"); // 需要压缩的最大尺寸 var MAX_SIZE = 500; var files = []; //监听文件选择事件 $("#pic").click(function() { $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传 fileDom.addEventListener("change", function() { var fileImg=this.files; console.log(fileImg); for (var i = 0; i < fileImg.length; i++) { var file = fileImg[i]; if (!/image/w+/.test(file.type)) { alert("请选择图片") return false; } //创建一个文件读取的工具类 var reader = new FileReader(); //这里利用了闭包的特性，来保留文件名 (function (x) { reader.onload = function (e) { var liNode = document.createElement("li"); liNode.innerText = x; // document.getElementById("fileList").appendChild(liNode); //调用压缩文件的方法，具体实现逻辑见下面 render(this.result, x); } })(file.name); //告诉文件读取工具类读取那个文件 reader.readAsDataURL(file); } },false); }); function render(src,name) { //创建Image对象 var image = new Image(); image.onload = function () { console.log(image.width,image.height); //通过固定的宽高比压缩 //宽大于高的情况 if (image.width > MAX_SIZE && image.width >= image.height) { image.height *= MAX_SIZE / image.width; image.width = MAX_SIZE; } //宽小于高的情况 if (image.height > MAX_SIZE && image.height > image.width) { image.width *= MAX_SIZE / image.height; image.height = MAX_SIZE; } var canvas = document.createElement("canvas"); //获取2d画布 var ctx = canvas.getContext("2d"); canvas.width = image.width; canvas.height = image.height; ctx.clearRect(0, 0, canvas.width, canvas.height); //绘制图片 ctx.drawImage(image, 0, 0, image.width, image.height); //生成base64码 var blob = canvas.toDataURL("image/png"); files.push(blob); document.getElementById("pic").src = blob; }; image.src = src; }  

热门文章