原生回传H5本地图片地址仅支持H5资源放置到项目/手机存储中使用
H5资源放置到服务器后无法读取插件返回的Android本地路径
要求(原生):
1. H5资源需放置到App项目assets目录/手机存储
使用到依赖Lrz(Js简化读取)
1. Lrz支持传入的内容为File对象/图片本地路径/图片网络路径 2. Lrz主要在Js中用于对图片压缩,可通过参数调整为不压缩
Js使用样例
1. 布局
<!-- 布局使用vant中的Dialog --> <van-dialog v-model="showDialog" title="图片预览" show-cancel-button> <img width="300" height="300" :src="imageBase64"> </van-dialog>
2. 定义变量
/** 定义变量 */ export default { data() { return { showDialog: false, imageBase64: '' } }, }
3. 读取图片
/** * 通过Lrz来加载本地图片 */ loadImageFile(path, successCallback, errorCallback, alwaysCallback) { lrz(path, { quality: 1 }) .then((rst) => { // 处理成功会执行 successCallback && successCallback(rst) }) .catch((err) => { // 处理失败会执行 errorCallback && errorCallback(err) }) .always(() => { alwaysCallback && alwaysCallback() }) }, /**将选择后的第一张图片路径转为Base64使用*/ imageSelect() { native.imageSelect({ 'limit': 2 }, (content) => { this.loadImageFile(content.paths[0], (rst) => { this.showDialog = !this.showDialog this.imageBase64 = rst.base64 }, err => { alert(err) }) }, (error) => { alert(error) }) },
4. 扩展
/**Lrz支持加载网路地址图片为File对象*/ testNetImage() { this.loadImageFile('http://img6.16fan.com/attachments/wenzhang/201805/18/152660818127263ge.jpeg', (rst) => { this.showDialog = !this.showDialog this.imageBase64 = rst.base64 }, err => { alert(err) }) },
