H5 加载 Android 本地路径图片

2022-10-13
北京
本文字数：953 字
阅读完需：约 3 分钟

大家好，我是小鑫同学。一位从事过 Android 开发、混合开发，现在长期从事前端开发的编程爱好者，我觉得在编程之路上最重要的是知识的分享，所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识，欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~

原生回传 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)  })},

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/c5db34162d02d2414c1932d3a】。文章转载请联系作者。

小鑫同学

关注

⚡InfoQ签约作者 2018-12-10 加入

还未添加个人简介

发布

暂无评论

创作场景

H5 加载 Android 本地路径图片

原生回传 H5 本地图片地址仅支持 H5 资源放置到项目/手机存储中使用

要求(原生):

使用到依赖 Lrz(Js 简化读取)

Js 使用样例

1. 布局

2. 定义变量

3. 读取图片

4. 扩展

小鑫同学

评论