uniapp H5端与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}
});

uniapp H5端与APP端压缩图片相关推荐

Web端和App端测试区别
Web和App测试区别测试知识与君共享 1.功能测试角度: 从功能的角度,Web端和APP端测试流程基本一致 2.用例编写角度: 从编写用例方法角度采用等价类,边界值,场景法,错误推测法,流程法,编 ...
基于Springboot的智慧校园管理系统（PC端和APP端双端应用）
这里写自定义目录标题基于Springboot的智慧校园管理系统(PC端和APP端双端应用) 项目整体介绍项目功能实现项目源码查询基于Springboot的智慧校园管理系统(PC端和APP端双端 ...
Web端与App端自动化测试框架
Web端与App端自动化测试框架一.Web端与App端的区别想了解Web端与App端自动化测试框架的区别 ,那么我们就要先来了解Web和App的区别.Web项目一般都是B/S架构,基于浏览器的,而 ...
Flask后端实践连载十六 Flask实现微信Web端及APP端登录注册
Flask后端实践连载十六 Flask实现微信Web端及APP端登录注册 tips: 本文将实现微信Web端和APP端登陆注册本文基于python3编写代码仓库项目场景某天,项目经理说,项目 ...
Web端和App端测试的区别
Web端和App端测试的区别 Web项目是B/S架构,基于浏览器的.App项目是C/S架构,必须要有客户端,用户需要安装客户端. 对于更新版本,Web项目只需要更新服务端,客户端就会同步更新,而App ...
uniapp proxy配置代理在h5端和app端
proxy代理uniapp官网明确指出配置是在h5属性下进行配置,由于app端是不存在跨域的情况,不存在跨域的情况,所以不需要考虑app端代理,只需要将配置信息配对就可以了我是用的uview封装的请 ...
移动端开发——APP端上H5容器化建设
1. 背景当前移动端和前端的结合愈加紧密,尤其是在偏重活动运营的电商App中,受制于App版本审核,具备研发成本低.可灵活发布等特点的H5页面受到青睐,使其在APP端上承接了越来越多的业务.然而H5 ...
pc端和app端加入微信群聊的测试用例设计点
pc端微信加入群聊和app端加入微信群聊的测试用例设计点 1.pc端不能创建群聊 2.app端可以通过扫描二维码进入群聊 3.可以通过好友拉取进入群聊 4.好友可以一次拉取多个人进入群聊 5.拉取的人 ...
uniapp h5 页面在移动端遮罩层禁止滚动 --安卓和ios端完美适配（只是测试了部分机型）
使用unipp 写h5 页面,在移动端,禁止遮罩层出现滚动问题. 直接在标签上面写上这个就可以了 @touchmove.stop.prevent="moveHandle" , ...
uniapp打包发布至app端 echarts图表不显示问题
原因:uni中非web端运行在V8引擎中,不支持web端的window.document.navigator等浏览器的API,只支持标准ES语法.因此借助网上的参考,进行Echarts组件封装,借助r ...

uniapp H5端与APP端压缩图片

uniapp H5端与APP端压缩图片相关推荐

最新文章

热门文章