html2canvas在安卓端微信里截取从相册打开的图片空白问题

需求描述：
在一个页面里显示两张图片，一张静态图，一张用户从相册或者拍照获取的图，然后将这两张图片合并，并保存。

问题描述：
为了方便快捷，笔者直接使用了html2canvas来进行截图，省去了自己操作绘制canvas的麻烦，在操作过程中，使用微信的chooseImage方法调用了手机相册，并且选中了一张图，并成功的在页面上显示，然后手动执行了截图操作，这时候，在IOS上并没有出现什么问题，获取的图片可以正常生成图片，但是在安卓上，生成的图片并没有显示从相册获取的图片。

原因分析：
在安卓环境下，html2canvas在微信中将获取的图片当成了外部图片，不能有效生成，既然如此，将图片转成base64数据肯定可以。

解决方案：
思路：将微信从相册获取到的图片转成base64，然后再执行html2canvas的转换操作。
这时，又碰到了问题，如何将图片转成base64，这时，有读者就想了，到这里就简单了，然后按照常用的思路来操作一番：创建canvas元素，然后new Image()，然后将img放到canvas中，然后导出base64数据，结果发现页面上没有图片，微信开发者工具还报错，生成的img的src获取不到chooseImage返回的路径图片。
正解：wxjsSDK提供了getLocalImgData方法，该方法会返回对应图片的base64数据，我们直接使用此方法即可，但是因为安卓和IOS返回的数据格式有差异，仍然要做点兼容。
处理代码如下：

/*** 获取本地图片接口*/getLocalImgData(localId) {return new Promise((resolve, reject) => {WechatPlugin.$wechat.getLocalImgData({localId: localId, // 图片的localIDsuccess: function (res) {var localData = res.localData; // localData是图片的base64数据，可以用img标签显示if (localData.substr(0, 5) != 'data:') {localData = 'data:image;base64,' + localData;}// 返回base64数据resolve(localData);},fail: function (err) {reject(err);}});});},

上述代码中WechatPlugin是vuxUI框架的微信jssdk插件，使用过的朋友一看便知，至此，安卓和IOS可以正常显示生成个图片了。

欢迎关注博主：小圣贤君，有问题可以留言哦~

html2canvas在安卓端微信里截取从相册打开的图片空白问题相关推荐

安卓端微信H5下载文件处理：让微信自动弹起跳转外部浏览器窗口
配套视频:https://www.bilibili.com/video/BV1oA411B7gv/ 背景今天鼓捣了一下手机投屏到笔记本,就想录个视频展示一下学习成果,正好就想起了很早之前实现的这个功 ...
android版本号小游戏,安卓端微信7.0.16版本运行小游戏问题
安卓端微信7.0.16版本运行小游戏问题框架类型问题类型终端类型微信版本基础库版本小游戏 Bug 微信安卓客户端 7.0.16 2.12.0 我们游戏最后一个版本是在2020年4月30号上 ...
h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）
记录一个最近在微信端页面开发时出现的问题:页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白). 原因:pc端微信浏览器不支持es6,而我的代码使用了 le ...
记响应式布局vh/vw单位在安卓端微信浏览器以及UC浏览器的坑
页面使用vh来控制元素高度的时候,在安卓端浏览器虚拟键盘弹出时,导致视口高度改变,以至于vh的取值改变 // 正常模式下 100vh = document.documentElement.client ...
h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）...
h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性解决:将ES6转换为 ...
移动端微信里打开H5页面，页面字体放大
背景:移动端H5页面,视口设置<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user ...
android临时文件夹,【报Bug】安卓端，保存视频到相册成功，临时文件夹中有，但是相册中没有...
产品分类: uniapp/App PC开发环境操作系统: Windows PC开发环境操作系统版本号: w10家庭版 HBuilderX类型: 正式 HBuilderX版本号: 2.7.14 手机系统 ...
H5在微信里只能调用相机，不能调用相册
< input type="file" id="upload_image" name="uploadImage" value=&quo ...
video标签android全屏,视频video标签在移动端微信中默认全屏播放的解决方案
最近后盾人移动端上线了,开发挺顺利,但也遇到几个小坑. 后盾人中的视频是用video视频标签引入的,当在微信中打开后盾人,播放视频的时候,视频默认会全屏播放. 安卓和ios下都存在此问题,解决方法如下 ...

html2canvas在安卓端微信里截取从相册打开的图片空白问题

html2canvas在安卓端微信里截取从相册打开的图片空白问题相关推荐

最新文章

热门文章