我们这里这里有一个需求,是将当前页面保存为海报分享给朋友或者保存到本地相册,因为是在小程序端开发的,所以不能使用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,宽高太小导致的内容没有画到话不上导致的