H5加载Android本地路径图片
2023-02-18 16:39:34 时间
原生回传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)
})
},
相关文章
- 解决第三方邮箱APP登陆QQ、163邮箱无法验证账户名或密码的问题(IOS、MacOS、Windows、Android)
- Mac电脑运行ios应用PlayCover
- 苹果发布 iOS 16 公开测试版,一起来看看这几项新功能
- 解决 Flutter 引起的 iOS 内存崩溃问题
- iOS 16 中的 Live Text 的更新
- iOS16 中的 3 种新字体宽度样式
- 在 iOS 16 中用 SwiftUI Charts 创建一个折线图
- 在 iOS16 中用 SwiftUI 图表定制一个线图
- Android平台GB28181设备接入端如何支持跨网段语音对讲?
- 基于flask和bootstrap-table的通用数据查询
- 爬虫方案 | 爬取大众点评网评论的几个思路(从小程序端)
- 【黄啊码】如何用小程序实现世界杯参赛队伍投票
- 《Android App开发进阶与项目实战》资源下载和内容勘误
- 微信小程序使用阿里巴巴的矢量图标iconfont
- 微信小程序 点击显示隐藏 极简Tab标签 点击添加class样式
- 微信小程序 wx:if 与 hidden区别
- 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题
- 微信小程序 自定义 tabBar案例 官方案例迁入无效解决方法 非 tab 页显示 tabBar的问题解决 自定义tabBar与原生tabBar以及自写伪tabbar的区别
- IOS APPStore 上传更新应用版本 软件
- Android - NETD解读