小程序canvas绘制并保存图片

小程序canvas绘制并保存图片,第1张

这篇主要讲canvas绘制以及保存到本地相册的方法

实现功能如下:

1.用户手动输入文字,并把这些文字绘制到canvas中

2.将图片绘制到canvas中

3.将canvas变成图片并保存到本地相册中

效果如图:

第一部分 wxml

要注意写这种形式tpye='2d',这是新版本的,旧版本的如下图已经不维护了,所以建议写这种,另外要注意id,不是写canvas-id,而只是id

第二部分 js

这么一写下来也没有什扰拍么特别卖李孝难的地方。其实还可以实现用户手动上传图片,这样可能会更有中稿趣一点

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

下面我们看微信的wx.canvasToTempFilePath和支付宝ctx.toTempFilePath中success返回的参数差异,我们如果要获取对应的图片,wx返回两种图片格式,一种是本地图片,一种是http协议内部临时图片(tempFilePath)。而支付宝扮昌腊迅和只存在一种图片厅滑格式,http协议临时图片(apFilePath)。

微信端中如果需要绘画canvas生成的图片进已有的canvas,采用drawImage,其中第一个参数是图片地址,微信端中要采用tempFilePath参数,支付宝端需要采用apFilePath


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12363037.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-24
下一篇 2023-05-24

发表评论

登录后才能评论

评论列表(0条)

保存