直接上方法了 !调用方法就行!
vue 方法
直接拿到input的file
,注意使用async
,因为方法是采用Promise
返回的
this.file = this.$refs.file.files[0] file = await compressImgs(this.file, compress)
/** * 压缩图片 * @param {file} file 文件file * @param {*} filename filename 为name * @param {*} objCompressed objCompressed 可传图片宽高,高默认同比例 * @returns */ export function compressImgs(file, objCompressed = {}) { return new Promise((resolve, reject) => { const windowURL = window.URL || window.webkitURL; const src = windowURL.createObjectURL(file); var img = new Image() img.src = src img.onload = function () { var that = this //默认压缩后图片规格 var quality = 0.7 var wd = that.width var hd = that.height var scale = wd / hd //实际要求 const w = objCompressed.width || wd const h = objCompressed.height || w / scale //生成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) var base64 = canvas.toDataURL('image/jpeg', quality) const url = dataURLtoFile(base64, file.name) // 回调函数返回base64的值 resolve(url) } }) } export function dataURLtoFile(dataurl, filename = Date.now()) { 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) } // var url = URL || webkitURL // return url.createObjectURL(new Blob([u8arr], { type: mime })) return new File([u8arr], filename, { type: mime }) }
uniapp方法,由于uniapp 上传后得到的是路径,所以采用路径压缩!
/** * 压缩图片 * @param {*} path 文件路径 为filePath * @param {*} filename filename 为name * @param {*} objCompressed objCompressed 可传图片宽高,高默认同比例 * @returns */ export function compressImgs(path, filename = Date.now(), objCompressed = {}) { return new Promise((resolve, reject) => { var img = new Image() img.src = path img.onload = function () { var that = this //默认压缩后图片规格 var quality = 0.7 var wd = that.width var hd = that.height var scale = wd / hd //实际要求 const w = objCompressed.width || wd const h = objCompressed.height || w / scale //生成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) var base64 = canvas.toDataURL('image/jpeg', quality) const url = dataURLtoFile(base64, filename) // 回调函数返回base64的值 resolve(url) } }) } export function dataURLtoFile(dataurl, filename = Date.now()) { 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) } // var url = URL || webkitURL // return url.createObjectURL(new Blob([u8arr], { type: mime })) return new File([u8arr], filename, { type: mime }) }