微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件

2024-05-11 02:53:24

标题微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件

图片上传功能作为一个比较常见的功能，有时候需要在微信内置浏览器里打开，但是有些型号的手机会出现打不开的现象，点击图片上传没有反应，这就涉及到一些兼容问题，如果你没有使用lrz.bundle.js这种图片压缩的插件，只需要把

<input type="file" accept="image/png,image/jpeg,image/gif,image/jpg">

改为

<input type="file"  accept="image/*" >

就可以了，但是如果使用了lrz.bundle.js图片压缩插件这里就有很多兼容的问题本人就是在这个插件上采了深坑，如图片扭曲、某些设备不自动旋转图片方向，没有jpeg压缩算法，不支持new Blob,formData构造的文件size为0，还有某些机型和浏览器（例如QQX5浏览器）莫名其妙的BUG等等，查询了很多资料和一些网友的帮助之后，基本实现了兼容IOS，Android，PC的功能，使用方式如下：
在页面中引入

<script src="./dist/lrz.bundle.js"></script>

接着通过change事件可以得到用户选择的图片

document.querySelector('#file').addEventListener('change', function () {lrz(this.files[0]).then(function (rst) {// 处理成功会执行console.log(rst);}).catch(function (err) {// 处理失败会执行}).always(function () {// 不管是成功失败，都会执行});
});

在函数里调用后台接口，写一些自己的逻辑。lrz.bundle.js插件的压缩包已经上传，链接地址如下：lrz.bundle.js图片压缩插件一般情况仅需引【lrz.bundle.js】即可。但绝对不要删除目录下的【*.chunk.js】，这些文件分别对应了IOS和Android的兼容代码，检测到符合环境时会自动引入【lrz.all.bundle.js】是包含了所有引用了，莫名其妙的问题下就引用这个吧。

微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件相关推荐

chrome设置微信ua_Chrome谷歌浏览器模拟微信内置浏览器的方法(电脑上)
在微信里打开网页链接都会调用微信内置的浏览器,这种情况下是不太容易调试的的,那么有没有办法让谷歌浏览器模拟微信浏览器呢?下面小编分享的方法可以让Chrome谷歌浏览器模拟微信内置浏览器方便大家调试. ...
关于微信内置浏览器，打开图片上传功能，调用的问题
关于微信内置浏览器,打开图片上传功能,调用的问题前段时间,项目完结测试的时候,同事打开魅族手机测试,无意中发现一个奇葩的问题! 描述: 显示的是文件系统,列表式的,没有调用相机的功能图标,为什么呢? ...
调用微信内置浏览器实现微信打开的网页上的图片能点击打开的效果
调用微信内置浏览器实现微信打开的网页上的图片能点击打开的效果为啥微信打开的网页有的图片能点击打开,有的不能呢?因为微信内置浏览器对打开的网页做了限制.一般我们使用微信的时候都不会特意修改浏览器,所 ...
c 中html上传文件大小,IOS微信内置浏览器对html标签input type=file上传的文件大小size错误？...
完整代码: function _s(){ var f = document.getElementById("f").files; //上次修改时间 alert(f[0].lastM ...
安卓微信内置浏览器 input type=file 选择文件未响应
微信内置浏览器采用以下形式选择图片不响应 <input type="file" accept="image/*"/> 解决思路步骤一.调微信接口得 ...
cocoscreator实现微信内置浏览器点击图片识别图中二维码
最近在做一个微信内置浏览器的小游戏,小游戏中有一个二维码,需要用户点击长按二维码弹出系统识别二维码按钮. 下面是解决步骤: 1.cocoscreator是如何实现在浏览器中渲染游戏画面的看图中箭头处 ...
《解决微信内置浏览器返回上一页强制刷新问题方法》
<解决微信内置浏览器返回上一页强制刷新问题方法> 参考文章: (1)<解决微信内置浏览器返回上一页强制刷新问题方法> (2)https://www.cnblogs.com/li ...
html5 微信返回按钮,《解决微信内置浏览器返回上一页强制刷新问题方法》(示例代码)...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
微信android返回上一页位置,解决微信内置浏览器返回上一页强制刷新问题方法...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...

最新文章

热门文章