uniapp实现图片压缩:

文章目录

1.思路:
2.案例:
3.效果：

1.思路:

发现uniapp自带图片压缩功能 ,但是并不通用，会出现下面的错误

2.案例:

/**
* H5端图片压缩
*  参数说明：
*  imgSrc 图片url
*  scale缩放比例 0-1
*  返回base64
*  callback 回调设置返回值
*/
translate(imgSrc, scale, callback) {var img = new Image();img.src = imgSrc;img.onload = function() {var that = this;var h = that.height; // 默认按比例压缩var w = that.width;var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');var width = document.createAttribute("width");width.nodeValue = w;var height = document.createAttribute("height");height.nodeValue = h;canvas.setAttributeNode(width);canvas.setAttributeNode(height);ctx.drawImage(that, 0, 0, w, h);var base64 = canvas.toDataURL('image/jpeg', scale); //压缩比例canvas = null;callback(base64);}
},

//选择图片、视频
//选择图片、视频
selectFileFun(e) {const that = thisconsole.log('压缩前', e.tempFiles[0].size)e.tempFilePaths.forEach(item => {that.imageList.push({name: 'imageList',uri: imgUrl})})
},
//上传
uploadFile(){const that = thisif (this.imageList.length > 0) {this.imageList.forEach(item => {that.translate(item.uri, 0.5, imgURL => {//查看压缩后的大小uni.getFileInfo({filePath: imgUrl,success: imgInfo => {console.log('压缩后', imgInfo.size);}})item.uri = imgURL})})}...
}

3.效果：

uniapp实现图片压缩:相关推荐

uniapp 最接近微信的图片压缩插件 Ba-ImageCompressor
简介(下载地址) Ba-ImageCompressor 是一款uniapp简单快捷的图片压缩插件,仿微信朋友圈压缩策略. 支持批量压缩支持设置不压缩的阈值,单位为K 支持返回压缩后图片大小,单位为B ...
5-6 uniapp 图片压缩
5-6 uniapp 图片压缩压缩的图片质量是从0到1的范围取值,数值越小,压缩的图片越小,我用的默认值0.92 1.02M --> 229KB 2.53M --> 523KB 3.46 ...
uni-app实现图片的上传和裁剪
uni-app实现图片的上传和裁剪 uni-app 实现图片的上传和裁剪,插件市场上已经有作者提供了相关的插件.这里主要介绍下我在自己开发图片上传和裁剪过程中遇到的一些问题. 图片上传图片上传功能比 ...
uni-app上传图片前压缩
在uni-app中,看过好多图片压缩都是使用canvas压缩,但是一运行在手机端,就会报错:not find Image; 所以要寻找另一种方法进行压缩图片 h5网址:http://www.html5 ...
Android性能优化之图片压缩优化
1 分类 Android图片压缩结合多种压缩方式,常用的有尺寸压缩.质量压缩.采样率压缩以及通过JNI调用libjpeg库来进行压缩. 参考此方法:Android-BitherCompress 备注: ...
JS—图片压缩上传（单张）
*vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...
使用libjpeg进行图片压缩（哈夫曼算法,无损压缩）
Huffman算法也是一种无损压缩算法,但与LZW压缩算法不同,Huffman需要得到每种字符出现概率的先验知识.通过计算字符序列中每种字符出现的频率,为每种字符进行唯一的编码设计,使得频率高的字符占 ...
Android图片压缩（质量压缩和尺寸压缩）
在网上调查了图片压缩的方法并实装后,大致上可以认为有两类压缩:质量压缩(不改变图片的尺寸)和尺寸压缩(相当于是像素上的压缩):质量压缩一般可用于上传大图前的处理,这样就可以节省一定的流量,毕竟现在的手 ...
android apk瘦身之图片压缩 tinypng
Android 的图片压缩其实压缩比很小.tinypng 大概可以压缩20%左右,我们工程的所有图片,之前是860k,压缩之后620k,少了200k. 使用: 1.安装python 2.使用pip进行 ...
(0031) iOS 开发之图片压缩
1. Aspect单词的, 都会按照图片的宽高比来拉伸.这样会显示不全照片 2. Scale单词的,都会对图片进行拉伸(缩放); 3. 没有出现Scale单词的,都不会对图片进行拉伸; UIViewC ...

uniapp实现图片压缩:

文章目录

1.思路:

2.案例:

3.效果：

uniapp实现图片压缩:相关推荐

最新文章

热门文章