js:
var eleFile = document.querySelector(‘#file‘);// 压缩图片需要的一些元素和对象var reader = new FileReader();var imga=document.getElementById(‘imga‘);var ?img = new Image();// base64地址图片加载完毕后 ??????????img.onload = function() { ????????var originWidth = this.width, //image resize ??压缩后的宽 ????????originHeight=this.height, ????????maxWidth = 400, maxHeight = 400, ????????quality = 0.8, //image quality ?压缩质量 ????????canvas = document.createElement(‘canvas‘), ????????drawer = canvas.getContext("2d"); ????????canvas.width = maxWidth; ???????canvas.height = originHeight/originWidth*maxWidth; ?????????drawer.drawImage(img, 0, 0, canvas.width, canvas.height); ?????????//上传到七牛云base64 ?????????var base64 = canvas.toDataURL("image/jpeg", quality); // 这里就拿到了压缩后的base64图片 ?????????//console.log(base64); ?????????//blob对象 ?????????canvas.toBlob(function(blob){ ?????????????//console.log(blob) ?????????}, "image/jpeg", quality); ?????????var file = dataURLtoFile(base64, ‘name‘); ?????????console.log(file); ?????????imga.src=base64; ?????}; //base64转file//filename图片的名字dataurl是base64地址 function dataURLtoFile(dataurl, filename) { ???var arr = dataurl.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1], ???????bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); ???while(n--){ ???????u8arr[n] = bstr.charCodeAt(n); ???} ???return new File([u8arr], filename, {type:mime});}// 文件base64化，以便获知图片原始尺寸reader.onload = function() { ???//reader.result就是base64 ???img.src = reader.result;};//addEventListener监听change事件eleFile.addEventListener(‘change‘, function () { ???file = this.files[0]; ???// 选择的文件是图片 ???if (file.type.indexOf("image") == 0) { ???????//console.log(file); ???????reader.readAsDataURL(file); //以数据url的方式读取文件内容 ????????????}});
html：<input id="file" type="file"><img id="imga" src="" >
js图片压缩并上传？
原文地址：https://www.cnblogs.com/duanzhange/p/9295795.html