支付宝&微信小程序Canvas生成图片

支付宝&微信识别canvas的id不统一

问题1:

<canvas id="canvas" canvas-id="canvas"></canvas>
如上图代码所示,当我们使用createdCanvasContext('xxxx')获取对应的canvas上下文的时候,支付宝端默认会根据id进行查询值,而微信端默认通过canvas-id获取值。(为了避免不出现问题,我们正常应该在canvas中id,canvas-id都应该加上,并且赋上相同的值)

问题2:

canvas转换图片api不相同,并且参数不相同,支付宝参数与支付宝开发者文档中的参数都出现不相同

微信api:wx.canvasToTempFilePath
支付宝api:ctx.toTempFilePath
支付宝和微信端不仅仅是api不相同,调用的节点也是不同的,微信采用微信自带的wx里面会有canvasToTempFilePath方法进行保存,而在传入的config中指定生成canvas的id。
微信例子:
wx.canvasToTempFilePath({
canvasId:"xxx" , //此为需要生成的canvasid
fileType:'jpg', //图片格式
quality:1, //图片质量
})
支付宝需要把canvas生成图片,则是通过canvas上下文去调用toTempFilePath去生成的,所以我们要先获取canvas上下文
支付宝例子:
const ctx = my.createdCanvasContext('canvas');
ctx.toTempFilePath({
fileType:'jpg', //图片格式
quality:1, //图片质量
})

下面我们看微信的wx.canvasToTempFilePath和支付宝ctx.toTempFilePath中success返回的参数差异,我们如果要获取对应的图片,wx返回两种图片格式,一种是本地图片,一种是http协议内部临时图片(tempFilePath)。而支付宝只存在一种图片格式,http协议临时图片(apFilePath)。
微信端中如果需要绘画canvas生成的图片进已有的canvas,采用drawImage,其中第一个参数是图片地址,微信端中要采用tempFilePath参数,支付宝端需要采用apFilePath

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容