H5加载Android本地路径图片

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

H5资源放置到服务器后无法读取插件返回的Android本地路径

要求(原生):

代码语言：javascript复制

1. H5资源需放置到App项目assets目录/手机存储

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

代码语言：javascript复制

1. Lrz支持传入的内容为File对象/图片本地路径/图片网络路径

2. Lrz主要在Js中用于对图片压缩,可通过参数调整为不压缩

Js使用样例

1. 布局

代码语言：javascript复制

<!-- 布局使用vant中的Dialog -->
<van-dialog v-model="showDialog" title="图片预览" show-cancel-button>
  <img width="300" height="300" :src="imageBase64">
</van-dialog>

2. 定义变量

代码语言：javascript复制

/** 定义变量 */
export default {
  data() {
    return {
      showDialog: false,
      imageBase64: ''
    }
  },
}

3. 读取图片

代码语言：javascript复制

/**
 * 通过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. 扩展

代码语言：javascript复制

/**Lrz支持加载网路地址图片为File对象*/
testNetImage() {
  this.loadImageFile('https://img.yuanmabao.com/zijie/pic/2022/12/24/jzen5fk5z4b.jpeg', (rst) => {
    this.showDialog = !this.showDialog
    this.imageBase64 = rst.base64
  }, err => {
    alert(err)
  })
},

html5

0 人点赞