小程序Canvas填坑路

本文介绍了在微信小程序中使用Canvas处理在线图片遇到的问题及解决方案,包括:将在线图片转为本地路径绘制、图片清晰度调整、Canvas转base64编码、屏幕适配等。通过动态设置canvas尺寸和利用小程序API,成功实现图片加文字并保存为高清晰度的本地图片。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        有一个如下的业务场景:后台返回一张图片的ID,前端通过ID拼接出图片的地址,拿到图片之后需要在图片上添加一些额外的文字,在前端显示,然后再将它保存为一张新的图片,并把它以base64格式发送给后台。

        这里我总共遇到了如下几个问题:

                1:在线图片无法在手机端通过canvas绘制显示。

                2:手机端测试,canvas绘制时只绘制了一部分。

                3:在线图片通过canvas绘制完添加完文字后,保存为本地图片时图片清晰度太低。

                4:在小程序里如何将本地图片转换成base64格式。

                5:前端显示的屏幕适配。

        接下来开始进行填坑之路。

        1,2:小程序本身不支持在手机端用canvas绘制在线图片,所以这里我们需要把图片的在线地址换成本地路径,然后再用本地路径去进行canvas绘制就行了。下面把

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值