uni-app h5 上传图片压缩图片

由于uni-app h5 不支持sizeType，如果需要压缩图片就只能自己去实现了。

1. 选择图片：

uni.chooseImage({count: 6, //默认9// sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: function (res) {let tempPaths = res.tempFilePathsif(tempPaths.length + _this.imgList.length > 6) {uni.showToast({title: '上传图片最多可选6张',icon: 'none'})} else {_this.imgList = _this.imgList.concat(tempPaths)_this.compressImage()}}})

compressImage(){for(let i in this.imgList){let imgFile = this.imgList[i]this.getImageInfo(imgFile)}},

2. 获取图片信息并压缩

// 获取图片信息getImageInfo(src) {let _this = thisuni.getImageInfo({src,success(res) {console.log('压缩前', res)let canvasWidth = res.width //图片原始长宽let canvasHeight = res.heightlet img = new Image()img.src = res.pathlet canvas = document.createElement('canvas');let ctx = canvas.getContext('2d')canvas.width = canvasWidth / 2canvas.height = canvasHeight / 2ctx.drawImage(img, 0, 0, canvasWidth / 2, canvasHeight / 2)canvas.toBlob(function(fileSrc) {let imgSrc = window.URL.createObjectURL(fileSrc)console.log('压缩后', imgSrc)_this.uploadFile(imgSrc)})}})},

3. 上传

// 上传图片uploadFile(filePath) {let _this = thisuni.uploadFile({url: '/api/api/Profile/UploadImg',name: 'file',filePath,formData: {},success: (res) => {let { data } = JSON.parse(res.data)_this.imgResults.push(data)},fail: (err) => {uni.showToast({title: err.errMsg,icon: 'none'})}});},

uni-app h5 上传图片压缩图片相关推荐

uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
uni-app h5 上传图片太大压缩图片
h5端上传图片太大压缩图片由于uni.compressImage()不支持h5压缩图片,所以得自己写~ 这个是html <view class="camera" styl ...
uni-app开发微信小程序，H5 关于压缩上传图片的问题
文章目录前言一.为什么要压缩图片二.图片压缩方式 1. 微信小程序 2. H5 总结前言关于微信小程序.H5兼容性问题,今天就压缩以及上传图片做一个可实现方法的简要阐述. 一. ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
uniApp H5项目中的压缩图片
子组件:选择相册还是拍照并对相片进行压缩成功之后把路径通过sFn方法传给父级,父级通过fFN方法走借口,对头像进行修改 <view class="main">< ...
h5压缩图片并上传到oss
需求背景:h5上传图片到oss,并返回图片的链接参考资料: 阿里云oss multipartUpload api 图片纯前端JS压缩的实现注意:以下不包括业务代码,纯个人处理的oss上传封装,替换 ...
uni-app APP,H5图片上传添加文字水印，图片只显示左上角bug(H5,安卓App可用，其他暂未测试)
项目场景: 提示:这里简述项目相关背景: uni-app上传图片添加文字水印功能时图片只显示左上角,或者图片重叠图片不规则一系列bug,特此记录问题描述提示:这里描述项目中遇到的问题: 上传图片 ...
h5压缩图片上传 php_一键压缩，图片上传大小不得超过200K？
今天分享一款压缩图片的小程序,它的名字就叫"图片压缩",多么简单粗暴好理解! 我们在网站实名认证或者上传电子图片的时候,经常被要求上传图片的大小不得超过一定限制,比如:图片不得超过 ...

uni-app h5 上传图片压缩图片

uni-app h5 上传图片压缩图片相关推荐

最新文章

热门文章

uni-app h5 上传图片 压缩图片

uni-app h5 上传图片 压缩图片相关推荐

最新文章

热门文章

uni-app h5 上传图片压缩图片

uni-app h5 上传图片压缩图片相关推荐