uni-app 新增相册选择界面的预览界面在H5页面原生壳中会自动剪裁，未配置取消功能。开发时代码备注H5模式下仍存在此问题

uni-app 新增相册选择界面的预览界面在H5页面原生壳中会自动剪裁，未配置取消功能。开发时代码备注H5模式下仍存在此问题

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/H5

浏览器平台：Chrome
浏览器版本：89.0.4389.90

示例代码：

uni.chooseImage({  
    count: 6, //默认9  
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有  
    sourceType: ['album'], //从相册选择  
    success: function (res) {  
        console.log(JSON.stringify(res.tempFilePaths));  
    }  
});

操作步骤：

代码中使用uni.chooseImage 开发，并采用H5的方式发行。在自己封装的原生壳中会出现自动剪裁功能，没有办法取消。（ios和android均有此现象）。

预期结果：

选择图片，取消修剪功能。可以配置，但是不强制使用

实际结果：

选择图片后，出现修剪功能，无法取消。取消后图片不被选择

bug描述：

新增 相册选择界面的预览界面底部补充图片编辑功能，支持裁剪、涂鸦、马赛克、添加文字等。无需调用API，升级新版即可。
在开发中使用uni.chooseImage 发行方式为H5。在浏览器端打开H5页面上传图片没有问题，不会自带预览剪裁图片功能。
但是将发行的H5放在 自己封装的原生壳中，IOS和安卓端都会自动带有预览剪裁功能，并且没有办法取消这个配置。

更多关于uni-app 新增相册选择界面的预览界面在H5页面原生壳中会自动剪裁，未配置取消功能。开发时代码备注H5模式下仍存在此问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这是你们自己的原生壳的实现，不是uni.chooseImage的实现，请询问你们的原生开发者是否对选择图片有做操作。

更多关于uni-app 新增相册选择界面的预览界面在H5页面原生壳中会自动剪裁，未配置取消功能。开发时代码备注H5模式下仍存在此问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的 非常感谢

这是一个典型的H5页面在原生壳中被拦截并增强处理的情况。当uni-app的H5页面运行在原生壳中时，系统会拦截uni.chooseImage调用，转而使用原生的图片选择器，这导致了裁剪功能的强制出现。

解决方案：

  1. 检查WebView配置：确认原生壳中WebView的setAllowFileAccess和setAllowContentAccess设置，确保H5能直接访问系统相册而不被拦截。

  2. 使用input元素替代：在需要禁用裁剪的场景下，可直接使用HTML input元素：

const input = document.createElement('input')
input.type = 'file'
input.accept = 'image/*'
input.multiple = true
input.onchange = (e) => {
  // 处理选择的文件
}
input.click()
  1. 参数配置尝试：虽然文档未明确支持，但可测试editable参数：
uni.chooseImage({
  count: 6,
  sizeType: ['original', 'compressed'],
  sourceType: ['album'],
  editable: false, // 尝试禁用编辑
  success: function (res) {
    console.log(JSON.stringify(res.tempFilePaths))
  }
})
回到顶部