利用Canvas实现小程序分享海报的生成与本地保存

利用Canvas实现小程序分享海报的生成与本地保存

虽然说这是个很常见的需求了，但真正实现起来才发现其中的坑是如此之多。尤其是微信小程序对于Canvas的支持非常之不友好。

实现过程

分享海报通常在小程序里是以弹窗的形式呈现，并需要利用canvas绘制图片并保存至本地，由用户自行分享到朋友圈。刚开始我是直接利用canvas渲染到小程序页面中，而因为这个需求需要从云端获取弹窗的背景图，这一部分延迟比较长，所以还是采用原生HTML渲染 + canvas 的形式, 将canvas设为absolute定位并使其位于页面之外。如果是没有这部分的请求延迟，可以直接渲染Canvas，工作量也会降低一些。

在组件中渲染canvas

因为是在弹窗组件中渲染canvas，如果使用原始语法绘制，会发现渲染失败，并报错canvas为空。这是因为在自定义组件下，对于createCanvasContext这个API，一定要加上第二个参数this，表示在这个自定义组件下查找拥有 canvas-id 的 canvas ，如果省略则不在任何自定义组件内查找。
但对于Taro框架来说：this指向的是Taro页面或组件实例。，如果要获取到Taro的页面和组件所对应 小程序原生页面和组件实例，需要使用this.$scope。

const ctx = Taro.createCanvasContext('share-photo', this.$scope);

使用getImageInfo获取canvas的图片资源

微信目前不支持在canvas中直接获取远程图片资源并渲染，所以需要通过getImageInfo这个api先获取图片并加载到用户本地之后再调用渲染。

Taro.getImageInfo({
   
    src: bgImg
}).then((res) => {
   
    console.log(res.path);
    this.setState({
   
        bgImage: res.path