uni-app 压缩图片

首先创建一个compress.js文件（以下是文件中图片压缩方法）

/*** APP端图片压缩*  参数说明：*  img 图片url*  scale缩放比例 1-100*  callback 回调设置返回值
*/
export function translateapp(img, scale, callback) {plus.io.resolveLocalFileSystemURL(img, (entry) => { //通过URL参数获取目录对象或文件对象entry.file((file) => { // 可通过entry对象操作图片 console.log('压缩前图片信息:' + JSON.stringify(file)); //压缩前图片信息if (file.size > 504800) { //   如果大于500Kb进行压缩plus.zip.compressImage({ // 5+ plus.zip.compressImage 了解一下，有详细的示例src: img, //src: 压缩原始图片的路径    dst: img.replace('.png', 'yasuo.png').replace('.PNG','yasuo.PNG').replace('.jpg', 'yasuo.jpg').replace('.JPG', 'yasuo.JPG'),width: '40%', //dst: (String 类型 )压缩转换目标图片的路径，这里先在后面原始名后面加一个yasuo区分一下height: '40%', //width,height: (String 类型 )缩放图片的宽度,高度quality: scale, //quality: (Number 类型 )压缩图片的质量overwrite: true, //overwrite: (Boolean 类型 )覆盖生成新文件// format:'jpg'   //format: (String 类型 )压缩转换后的图片格式}, (event) => {console.log('压缩后图片信息:' + JSON.stringify(event)); //返回压缩后的图片路径callback(event.target);}, function(err) {console.log('Resolve file URL failed: ' + err.message);});} else { //else小于500kb跳过压缩，直接返回现有的srccallback(img);}});}, (e) => { // 返回错误信息console.log('Resolve file URL failed: ' + e.message);});}
/*** H5端图片压缩*  参数说明：*  imgSrc 图片url*  scale缩放比例 0-1*  type 返回图片类型  默认blob *  callback 回调设置返回值
*/
export function translate(imgSrc, scale, type , 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;if(type == 'base64'){callback(base64);}else{var blob = base64ToBlob(base64); var blobUrl = window.URL.createObjectURL(blob);//blob地址callback(blobUrl);}}
}
// base转Blob
export function base64ToBlob(base64) { var arr = base64.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 Blob([u8arr], {type: mime});
}

之后在script标签中引用

然后在拍照或选择图片后调用

uni.chooseImage({count: 6, //默认9sizeType: [ 'original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['camera'], //从相册选择 albumsuccess: function (res) {//区分APP与H5不同端调用不同的方法// #ifdef APP-PLUS /*** APP端图片压缩*  参数说明：*  img 图片url*  scale缩放比例 1-100*  callback 回调设置返回值 */translateapp(res.tempFilePaths[0], 80, imgUrl => {//打印压缩后返回的图片urlconsole.log(imgUrl ); })// #endif// #ifdef H5/*** H5端图片压缩*  参数说明：*  imgSrc 图片url*  scale缩放比例 0-1*  type 返回图片类型：base64、blob（默认blob）   *  callback 回调设置返回值 */translate(res.tempFilePaths[0], 0.7, ' ', imgUrl => {//打印压缩后返回的图片url         console.log(imgUrl );   })// #endif}
});

uni-app 压缩图片相关推荐

uniapp的uni.compressImage压缩图片的巨坑
因需求,使用图片上传时候需要将图片压缩到1m以内,使用uni的这个组件,因为要调用后端的上传图片接口,所以用到了uni.uploadFile,本来我想的是先压缩再上传,结果我发现,压缩虽然能实现,但是 ...
uni App多图片上传，java后台接收
前台页面: <wslimg title="图片上传" :num="9" :dataList="dataLi ...
uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
Android 高清加载巨图方案拒绝压缩图片
Android 高清加载巨图方案拒绝压缩图片转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49300989: 本文出自: ...
webp app推荐图片格式，更小更快减少oom
一.什么是 WebP? WebP(发音 weppy,项目主页),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8.根据 Google 的测试,无损压缩后的 WebP 比 PNG ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
takephoto 框架_GitHub - Smecking/TakePhoto: 一款用于在Android设备上获取照片（拍照或从相册、文件中选择）、裁剪图片、压缩图片的开源工具库...
TakePhoto是一款用于在Android设备上获取照片(拍照或从相册.文件中选择).裁剪图片.压缩图片的开源工具库,目前最新版本4.0.2. 3.0以下版本及API说明,详见TakePhoto2. ...
小程序上传服务器图片压缩,微信小程序压缩图片并上传到服务器（拿去即用）...
/**压缩图片*/compressionImage(tempFilePaths, params) { let that= thiswx.getImageInfo({ src: tempFilePath ...
Android-JNI开发系列《十》实践利用libjpeg-turbo完美压缩图片不失真
人间观察步入社会后,你会发现,老人说的话都是对的. 前面讲了些Android的jni知识和bitmap的实践,接下来几篇应该都是Android中jni的一些实践.这篇我们对Android中图片在jn ...
uniApp H5项目中的压缩图片
子组件:选择相册还是拍照并对相片进行压缩成功之后把路径通过sFn方法传给父级,父级通过fFN方法走借口,对头像进行修改 <view class="main">< ...

uni-app 压缩图片

uni-app 压缩图片相关推荐

最新文章

热门文章