uniApp H5项目中的压缩图片

子组件：选择相册还是拍照并对相片进行压缩成功之后把路径通过sFn方法传给父级，父级通过fFN方法走借口，对头像进行修改

<view class="main"><view class="item" @tap="albumPhoto"><text>从手机相册选择</text></view><view class="item" @tap="cameraPhoto"><text>拍照</text></view><view class="item cancel" @tap="hidePhoto"><text>取消</text></view>
</view>    //js代码
props:{showPhoto:{type:Boolean},photoOptions:{type:Object}},
//从相册选择图片albumPhoto(){let self=this;plus.gallery.pick(function(path){var name = path.substring(path.lastIndexOf("/")+1); self.compressImage(path,name);//图片压缩}, function(e){}, {filter:'image'});},    //点击拍照cameraPhoto(){var self=this;var cmr = plus.camera.getCamera();cmr.captureImage(function(p) {    plus.io.resolveLocalFileSystemURL(p, function(entry) {    self.compressImage(entry.toLocalURL(),entry.name);    }, function(e) {    plus.nativeUI.toast("读取拍照文件错误：" + e.message);    });    }, function(e) {    }, {    filter: 'image'   }); },/* 压缩图片 */compressImage(url,filename){    let self=this;var name="_doc/upload/"+filename;var pages = getCurrentPages();  var page = (pages[pages.length - 1]).route;  console.log('获取当前路由',page)let  params={src:url,//src: (String 类型 )压缩转换原始图片的路径dst:name,//压缩转换目标图片的路径    //quality: (Number 类型 )压缩图片的质量.取值范围为1-100    overwrite:true,//overwrite: (Boolean 类型 )覆盖生成新文件};if(page=='pages/my/info'){params.width='150';/* params.height='150'; */params.quality=60;}else{params.width='400';/* params.height='400'; */params.quality=70;}plus.zip.compressImage(params,    function(zip) {  //页面显示图片console.log('压缩图片',zip.target)self.$emit('sFn',zip.target)},function(error) {    plus.nativeUI.toast("压缩图片失败，请稍候再试");    });    },

父组件：

引用的子组件，showPhoto是显示弹出框，sFn方法是通过子组件对图片压缩成功之后传递给父组件压缩完的图片路径

<prompPhoto :showPhoto="showPhoto" :photoOptions="photoOptions"  @sFn="fFn"></prompPhoto>

changePhoto(){console.log('上传图片',this.photoOptions)let _this = this;this.showPhoto = true;this.photoOptions = {//隐藏弹出框change(){console.log('取消按钮')_this.showPhoto = false;},// 图片上传成功success(res){console.log('上传成功',res)}}
},
fFn(imgUrl){let  self=this;self.showPics(imgUrl);self.showPhoto = false;self.prePhoto = true;self.imgUrl1=imgUrl;updateImgAPI({filePath:imgUrl,formData:{'memberid':self.userId,},name:'pic'}).then( resImg => {console.log(11111,resImg)this.resImg=resImg;uni.showToast({title:'修改成功！',icon:'none'})}) },
/* 展示图片 */showPics(url){ let  self=this;//根据路径读取到文件   plus.io.resolveLocalFileSystemURL(url,function(entry){  entry.file( function(file){var fileReader = new plus.io.FileReader();  fileReader.readAsDataURL(file);  fileReader.onloadend = function(e) {  self.previewPhoto= e.target.result.toString(); }  });  });   },

uniApp H5项目中的压缩图片相关推荐

android+腾讯地图h5,在uniapp H5项目中使用腾讯地图sdk
这里主要针对的是H5,小程序或app都有现成的sdk可以使用: 本人是用uniapp在做微信公众号的h5页面,其中需要把经纬度信息转化成文字描述的位置信息,在腾讯地图开发平台上申请了一个key,然后下 ...
uni-app h5 上传图片太大压缩图片
h5端上传图片太大压缩图片由于uni.compressImage()不支持h5压缩图片,所以得自己写~ 这个是html <view class="camera" styl ...
uniapp H5 项目播放 m3u8格式视频
uniapp H5 项目播放 m3u8格式视频阐述在项目中,可能会获取一些直播流地址,比如最常见的就是.m3u8视频格式.在小程序可以直接使用video 标签就可以直接播放,因为小程序有自己的引 ...
在Vue2.0项目中与H5项目中获取、设置、清除cookie的一些注意点
在vue中获取cookie 原生js方法没有直接获取cookie中值的,所以我在vue的项目中我自己写了个获取cookie值的方法(还有删除与设置cookie的方法还没去写,大家一起来补充完善) &l ...
Word2010中怎样压缩图片使文件变小
我们在使用Word2010编辑文档的时候,为了使含有大量图片的文件变小,可以通过压缩图片实现.本篇经验就来介绍一下压缩图片的两种方法. 一.手动压缩图片 1.我们首先打开Word2010文档页面,选中 ...
H5项目中 ios的border不显示问题
H5项目中 ios的border不显示问题在开发H5项目过程中,发现先天如果用border,在安卓正常显示,苹果则显示不出来原因是border给0.01rem(1px) 解决方法:遇到需要用bor ...
H5项目中通过iframe引入语音导览解决微信jsapi关于同一级域名二级域名跨域问题解决方案
H5项目中通过iframe引入语音导览解决微信jsapi关于同一级域名二级域名跨域问题解决方案在项目的入口文件App.js中 <iframe src="https://www.abc ...
Vue项目中加载图片的坑
Vue项目中加载图片时,遇到的坑 1.当直接在标签中,使用图片路径,此时可以正常显示. <img src='img_src' /> 正常显示 2.当img标签的src属性为变量时,且该变量 ...
android图片缓存,直接应用项目中的Android图片缓存技术
前不久搞的Android图片缓存,刚开始引入开源的框架,用着还行,但是在开发中遇到问题,就比如universal-image-loader-1.9.5.jar这个框架吧,在加载图片的时候自定义imag ...

uniApp H5项目中的压缩图片

uniApp H5项目中的压缩图片相关推荐

最新文章

热门文章