taro 兼容支付宝小程序和微信小程序＜七＞-- 上传图片及图片转base64

项目：taro3 + vue3

描述：

上传图片，证件的地方需要识别
微信和h5端是用的base64方式传参 -> taro兼容微信小程序和h5 - 上传图片及转换base64

本文是在以上的基础上兼容支付宝小程序

方法一

这个是官方文档的方法，效果如何没有试…

my.chooseImage({success: res => {const path = res.apFilePaths[0];console.log(path);my.uploadFile({url: 'https://...', // 请替换成有效的服务端 urlfileType: 'image',fileName: 'userfile',filePath: path,formData: { extra: '其他信息' },success: res => {my.alert({ title: '上传成功' });},fail: err => {my.alert({ title: '上传失败', content: JSON.stringify(err) });},});},
});

方法二

用base64的方法
1、用官方的方法转，真机报错

my.chooseImage({success: res => {const fs = my.getFileSystemManager();fs.readFile({filePath: `${res.apFilePaths[0]}`,// readFile 不传入 encodding 参数，则以 ArrayBuffer 方式读取success:({ data }) => {const base64 = my.arrayBufferToBase64(data);// },});}
});

2、用canvas转
页面中放一个canvas, 通过toDataURL转base64

<canvasid="upload-canvas":width="canvasWidth":height="canvasHeight"style="display: none;">
</canvas>

canvasWidth = ref(160)
canvasHeight = ref(160)events.on(PAGE_EVENTS.SET_CANVAS_SIZE, data => {const { width, height } = datathis.canvasWidth.value = widththis.canvasHeight.value = height
})

/*** 支付宝转base64* @param id canvasId* @param path 路径*/
export async function useGetBase64InAlipay({ id, path }) {const { width, height } = await useGetImageInfo(path)let newWidth = widthlet newHeight = heightlet scale = 1if (width > height) {newWidth = width > 750 ? 750 : widthscale = newWidth / widthnewHeight = parseInt(height * scale)} else {newHeight = height > 750 ? 750 : heightscale = newHeight / heightnewWidth = parseInt(width * scale)}if (!ctx || (ctx && (newWidth !== canvasWidth || newHeight !== canvasHeight))) {ctx = Taro.createCanvasContext(id)canvasWidth = newWidthcanvasHeight = newHeightevents.trigger(PAGE_EVENTS.SET_CANVAS_SIZE, { width: newWidth, height: newHeight })}return new Promise(resolve => {ctx.drawImage(path, 0, 0, newWidth, newHeight)ctx.draw(false, () => {ctx.toDataURL().then(async dataURL => {resolve(dataURL)})})})
}/*** 获取图片信息* @param path*/
export function useGetImageInfo(path) {return new Promise(resolve => {my.getImageInfo({src: path,success: res => {resolve(res)}})})
}

这里面的遇到的坑：
1、得到的图片不完整
解决：画的时候图片宽高和画布的宽高保持一致
ctx.drawImage(path, 0, 0, width, height)
width, height必须和canvas的一样

2、在1的基础上出现另一个问题：如果证件尺寸很大，比如 1200 * 1500，得到的图片会比例不对，就没有办法识别
解决：在chooseImage的临时图片用getImageInfo（）去获取图片的宽高，然后等比例缩放后再转base64

**！！注意：**等比例缩放后的宽高要同步到canvas上，否则得到的图片还是不完整的

3、最后后端返回的证件识别的时候报错
解决：后端小伙伴做了一个重绘

taro 兼容支付宝小程序和微信小程序＜七＞-- 上传图片及图片转base64相关推荐

map和foreach的区别和应用场景_支付宝小程序和微信小程序，两者有何区别？
原标题:支付宝小程序和微信小程序,两者有何区别? 自2017年1月微信推出小程序之后,小程序的发展势头便愈来愈猛.作为腾讯老对头的阿里,也开始投入小程序的研发.在一年多的开放公测后,支付宝小程序终于于 ...
谷歌小程序和微信小程序，你更看好哪个？
微信"小程序"无疑是16年年末最火爆的新技术,美国时间1月24日,谷歌也推出自己了"小程序"--Android Instant Apps,谷歌.微信都在做的小程 ...
怎么添加一个程序集_门店小程序，微信小程序怎么添加店铺
现今随着互联网发展,越来越多选择网上购物代替实体店购物,微信作为最多人使用的社交软件,他的商机也被许多企业商家发展,进入微信分销小程序购物是现在最流行的购物方式,驱使很多实体店也纷纷加盟进驻门店分销小 ...
微信与php什么区别,微信小店和微信小程序的区别是什么？
区别:微信小店的功能比较少,只拥有基本的商城购物功能,没有营销功能,因而只适合不需要营销推广的个人开店:而小程序则是支持各种功能开发,可以开发商城小程序,也可以开发各种营销推广功能,能够满足商家的多功 ...
【小程序】微信小程序开发技巧实用手册（自己做笔记用）
[Css]Css和Html常用设计实例参考笔记(自己开发项目用)_敦厚的曹操的博客-CSDN博客_html和css的项目实例一.左右居中1.div等块元素左右居中margin: 0 auto;marg ...
如何制作一个微信小程序【微信小程序是怎么做的】
为什么现在这么多人使用微信小程序呢?因为微信小程序除了便捷易开发,公司企业可以用来做小程序展示官网,商家也可以做小程序商城,甚至个人也可以拥有自己的小程序.那么如何制作一个微信小程序?微信小程序是怎么 ...
微信小游戏和微信小程序的区别与共同
微信小游戏小游戏的运行环境在 iOS 上是 JavaScriptCore,在 Android 上是 V8,都是没有 BOM 和 DOM 的运行环境,没有全局的 document 和 window 对 ...
微信小程序和微信小游戏的区别体现在哪？
微信小程序和微信小游戏有什么区别?随着<羊了个羊>持续大火,很多人把开发目光投向了微信小游戏.虽然说微信小游戏是微信小程序的一种类型,但两者不仅仅是服务类目不同,所提供的部分小程序能力也不 ...
微信小程序、微信小游戏作品汇总合集，各种好玩的小程序
微信小程序.微信小游戏作品汇总合集,各种好玩的小程序小程序: 微信小程序:易阅小程序作品展示微信小程序:幸福磁县小程序作品展示微信小程序:小说精品榜小程序作品展示微信小程序:武汉智慧交警小程序 ...
个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...

taro 兼容支付宝小程序和微信小程序＜七＞-- 上传图片及图片转base64

方法一

方法二

taro 兼容支付宝小程序和微信小程序＜七＞-- 上传图片及图片转base64相关推荐

最新文章

热门文章