前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >H5加载Android本地路径图片

H5加载Android本地路径图片

作者头像
前端小鑫同学
发布2022-12-24 10:43:48
1.4K0
发布2022-12-24 10:43:48
举报

原生回传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 &amp;&amp; successCallback(rst)
    })
    .catch((err) => {
      // 处理失败会执行
      errorCallback &amp;&amp; errorCallback(err)
    })
    .always(() => {
      alwaysCallback &amp;&amp; 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('http://img6.16fan.com/attachments/wenzhang/201805/18/152660818127263ge.jpeg', (rst) => {
    this.showDialog = !this.showDialog
    this.imageBase64 = rst.base64
  }, err => {
    alert(err)
  })
},
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-05-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 原生回传H5本地图片地址仅支持H5资源放置到项目/手机存储中使用
    • 要求(原生):
      • 使用到依赖Lrz(Js简化读取)
        • Js使用样例
          • 1. 布局
          • 2. 定义变量
          • 3. 读取图片
          • 4. 扩展
      相关产品与服务
      图片处理
      图片处理(Image Processing,IP)是由腾讯云数据万象提供的丰富的图片处理服务,广泛应用于腾讯内部各产品。支持对腾讯云对象存储 COS 或第三方源的图片进行处理,提供基础处理能力(图片裁剪、转格式、缩放、打水印等)、图片瘦身能力(Guetzli 压缩、AVIF 转码压缩)、盲水印版权保护能力,同时支持先进的图像 AI 功能(图像增强、图像标签、图像评分、图像修复、商品抠图等),满足多种业务场景下的图片处理需求。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档