原生回传H5本地图片地址仅支持H5资源放置到项目/手机存储中使用
H5资源放置到服务器后无法读取插件返回的Android本地路径
要求(原生):
| 1. H5资源需放置到App项目assets目录/手机存储 |
使用到依赖Lrz(Js简化读取)
| 1. Lrz支持传入的内容为File对象/图片本地路径/图片网络路径 |
| |
| 2. Lrz主要在Js中用于对图片压缩,可通过参数调整为不压缩 |
Js使用样例
1. 布局
| |
| <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. 读取图片
| |
| |
| |
| loadImageFile(path, successCallback, errorCallback, alwaysCallback) { |
| lrz(path, { quality: 1 }) |
| .then((rst) => { |
| |
| successCallback && successCallback(rst) |
| }) |
| .catch((err) => { |
| |
| errorCallback && errorCallback(err) |
| }) |
| .always(() => { |
| alwaysCallback && alwaysCallback() |
| }) |
| }, |
| |
| |
| 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. 扩展
| |
| 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) |
| }) |
| }, |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· spring官宣接入deepseek,真的太香了~