5-6 uniapp 图片压缩

压缩的图片质量是从0到1的范围取值，数值越小，压缩的图片越小，我用的默认值0.92
1.02M --> 229KB
2.53M --> 523KB
3.46M --> 723KB
如果图片过大（大于4.5M左右），压缩后仍然会大于1M，就会在压缩后的基础上再次进行压缩
4.73M --> 225KB


export default {methods: {// 选择图片chooseImgs() {let that = thisuni.chooseImage({count: 1, // 默认9success: res => {this.images = res.tempFiles[0].pathconsole.log('压缩前', res.tempFiles[0])// 大于1M压缩if (Math.ceil(res.tempFiles[0].size / 1024) > 1024) {that.compress(res.tempFiles[0])} else {that.uploadImage(res.tempFiles[0])}}})},// 压缩图片compress(file, limit = 0.92, file_size = 50) {let _this = thisreturn new Promise((resolve, reject) => {if (!file) {reject(new Error('不存在文件'))}const type = file.typeconst size = file.sizeconst whiteType = ['image/jpeg', 'image/png']if (whiteType.indexOf(type) === -1) { // 判断文件类型reject(new Error('错误的文件类型'))}if (Math.ceil(size / 1024) < file_size) { // 判断文件大小resolve(file)}const reader = new FileReader()reader.readAsDataURL(file)reader.onload = e => {const img = new Image()img.src = e.target.resultimg.onload = () => {const ratio = img.naturalHeight / img.naturalWidthconst canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')canvas.width = img.width > 750 ? 750 : img.width // 固定宽度canvas.height = img.width * ratioctx.drawImage(img, 0, 0, canvas.width, canvas.height)// limit:  0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值。const newImg = canvas.toDataURL('image/jpeg', limit)// 将base64转换为filel流，let flie = _this.convertBase64UrlToFile({dataURL: newImg,type: 'image/jpeg',contentName: file.name})console.log('flie', flie)_this.uploadImage(flie)}}})},// 转base64convertBase64UrlToFile(base64) {let urlData = base64.dataURLlet type = base64.typelet contentName = base64.contentNamelet bytes = nullif (urlData.split(',').length > 1) { //是否带前缀bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte} else {bytes = window.atob(urlData)}// 处理异常,将ascii码小于0的转换为大于0let ab = new ArrayBuffer(bytes.length)let ia = new Uint8Array(ab)for (let i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i)}let result = new Blob([ab], {type: type,})let result1 = new File([result], contentName, {type: type})result1.path = window.URL.createObjectURL(result)return result1},// 上传图片uploadImage(img) {console.log(img.path)uni.uploadFile({url: 'http://xxxxxx.cn/api/CKSelect',filePath: img.path,name: 'image',success: (res) => {uni.hideLoading()const data = JSON.parse(res.data)if (data.code == 200 && data.data) {this.info = data.data} else {this.info = {}uni.showModal({content: data.msg || '查询失败',showCancel: false,success: function (res) {if (res.confirm) {that.images = require('../../static/img/up.png')}}})}},fail: function (err) {uni.hideLoading()uni.showToast({title: '失败',icon: 'none'})}});}}
}

5-6 uniapp 图片压缩相关推荐

uni-app 图片压缩
html部分 canvas标签必须写,必须写,后面需要获取canvas的属性 <view style="visibility: hidden;" class="&q ...
uniapp 最接近微信的图片压缩插件 Ba-ImageCompressor
简介(下载地址) Ba-ImageCompressor 是一款uniapp简单快捷的图片压缩插件,仿微信朋友圈压缩策略. 支持批量压缩支持设置不压缩的阈值,单位为K 支持返回压缩后图片大小,单位为B ...
uniapp图片上传与压缩，兼容小程序与H5
图片上传借助了Uview2.0的组件 <u-upload :fileList="imgs" :name="" @afterRead="after ...
Uniapp 图片选择插件（支持视频、音频） Ba-MediaPicker
简介(下载地址) Ba-MediaPicker 是一款功能强大的uniapp图片.音视频选择插件,可自定义配置,支持单选.多选,支持已选项回显,支持图片压缩.裁剪,支持预览大图.视频.音频等等. 支持 ...
Android性能优化之图片压缩优化
1 分类 Android图片压缩结合多种压缩方式,常用的有尺寸压缩.质量压缩.采样率压缩以及通过JNI调用libjpeg库来进行压缩. 参考此方法:Android-BitherCompress 备注: ...
JS—图片压缩上传（单张）
*vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...
使用libjpeg进行图片压缩（哈夫曼算法,无损压缩）
Huffman算法也是一种无损压缩算法,但与LZW压缩算法不同,Huffman需要得到每种字符出现概率的先验知识.通过计算字符序列中每种字符出现的频率,为每种字符进行唯一的编码设计,使得频率高的字符占 ...
uni 根目录路径_如何解决uniapp图片路径错误问题
uniapp图片路径错误的解决办法:1.在根目录"manifest.json"中配置h5下的"publicPath":2.在h5配置中运行的基础路径进行配置即可 ...
Android图片压缩（质量压缩和尺寸压缩）
在网上调查了图片压缩的方法并实装后,大致上可以认为有两类压缩:质量压缩(不改变图片的尺寸)和尺寸压缩(相当于是像素上的压缩):质量压缩一般可用于上传大图前的处理,这样就可以节省一定的流量,毕竟现在的手 ...

5-6 uniapp 图片压缩

5-6 uniapp 图片压缩

5-6 uniapp 图片压缩相关推荐

最新文章

热门文章