uniapp+vue3使用canvas保存海报的使用示例，各种奇奇怪怪的问题解决办法

我们这里这里有一个需求，是将当前页面保存为海报分享给朋友或者保存到本地相册，因为是在小程序端开发的，所以不能使用html2canvas这个库，而且微信官方新推出Snapshot.takeSnapshot这个api还不是很完善，如果你是纯小程序开发的，可以看这篇文章：微信小程序渲染引擎Skyline小试牛刀--快书 - 知乎

我这里使用uniapp开发的，所以只能使用传统的方式开发，就是使用canvas自己画一个出来，这个过程中遇到了也是很多的挑战和问题，这里记录一下。

基础canvas配置

需要在template中添加一个canvas画布，并且配置id和canvas-id：

千万不要多此一举加上类型?type="2d" 这些参数，因为会没有任何反应还会一堆问题

  <!-- 绘制海报的canvas -->
  <canvas class="share-content" id="myCanvas" canvas-id="myCanvas" />

因为我开发环境是vue3，所以创建画布和保存图片都不需要传递this或者instance实例：?

  // 创建画布：
  const canvasId = "myCanvas"
  const ctx = uni.createCanvasContext(canvasId);

?

问题：canvasToTempFilePath: fail canvas is empty

1.可能是你加上了?type="2d"这个参数导致的。

2.可能是canvas的id或者id没有配置正确，没有和js中的id一致导致的。

3.可能是canvas还没渲染出来，你就开始使用导致的。

4.可能是你没有加上this或者instance导致的。vue2中要加上this，vue3中可以使用getCurrentInstance 这个vue中的函数获取实例对象。

import { getCurrentInstance } from "vue";



const instance = getCurrentInstance() as any
// 换整个圆环
const ctx = uni.createCanvasContext("circlefCanvas", instance);

问题：画出来的图片是空白

1.可能是你ctx.draw()之后，没有等一会就开始生成图片，出来就是空白。

2.可能是你画布设置的尺寸太小，或者canvasToTempFilePath中传递的参数x,y,宽高太小导致的内容没有画到话不上导致的