小程序的填坑小技巧之Canvas

这周接到一个这样的坑爹需求，小程序需要实现一个图片分享的功能。让用户可以把图片发送到朋友圈或者其他渠道。刚开始拿到这个需求，觉得还好，没有太大的感觉, 第一个感觉想把锅甩给后端，调用一个接口让后端 传回来一个URL，前端只负责显示就好。^_^ 当然这么天真的想法基本上不现实的，前端开发必须也得出力。

用户点击分享按钮的时候，会把图片的base64字符串发送给后端，再把后端返回的图片URL通过消息的形式发送给好友。讲道理，似乎没什么大不了的。但真正在小程序项目中落地还是遇到了很多问题。网上有的博文会告诉你怎么通过后台把图片转化成base64字符串，有的博文会介绍通过canvas把图片转化成base64字符串，还有的说canvas如果图片太大，很容易出现内存溢出的问题。看完这些文章，心里基本有底了，就开始coding，争取早日把这个需求搞定。

首先把canvas通过组件的形式写好，如下图所示：

<view>
  <canvas type="2d" canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>
</view>

// 获取canvas对象
const canvas = document.getElementById('myCanvas')
// 获取canvas的绘图上下文
const ctx = canvas.getContext('2d')

接着把图片通过canvas进行绘制，然后通过canvas.toDataURL()方法将图片转换为base64字符串，如下图所示：

// 绘制图片
ctx.drawImage(image, 0, 0)
// 将canvas转换为base64字符串
const base64 = canvas.toDataURL()

然后把base64字符串发送给后端，一切看上去都很顺利，后端返回了一个图片URL，再把这个图片URL通过消息的形式发送给好友，大功告成。心里美滋滋的，觉得离下班越来越近了。

结果用户反馈说图片模糊不清。刚开始很纳闷，明明我把图片原原本本地发送给了好友，怎么会模糊不清呢？检查了后端代码，没问题。然后在网上搜索了一下，发现原来canvas在把图片转化成base64字符串的时候，会对图片进行压缩。压缩的程度取决于图片的质量，质量越高，压缩的程度就越小，图片也就越清晰。

在开发工具中修改了图片的质量，然后重新发送给好友，果然清晰了很多。但用户又反馈说图片太大了，朋友圈发不出去。这可咋整，一边是图片质量，一边是图片大小，真是鱼与熊掌不可兼得啊。

最后经过一番折腾，终于找到了一个折中的办法，就是把图片的质量降低一点，然后再把图片的大小缩小一点。这样既保证了图片的清晰度，又保证了图片的大小。

通过这次经历，我总结了几点小程序中使用Canvas的填坑技巧：

1. Canvas在把图片转化成base64字符串的时候，会对图片进行压缩。压缩的程度取决于图片的质量，质量越高，压缩的程度就越小，图片也就越清晰。
2. Canvas的图片大小也有限制，如果图片太大，很容易出现内存溢出的问题。
3. 在小程序中使用Canvas的时候，需要考虑图片的质量和大小，找到一个折中的办法。

希望这些技巧能帮助您避免常见问题并提高开发效率。