小程序让canvas图表转换成图片

前言

使用f2在ios上使用canvas绘制图表会有问题，canvas绘制的图表在长滚动的页面中，可能会导致焦点在canvas的时候滚动失效。

解决方案

1. 方案：使用view，zIndex层级进行遮罩。结果：失败。
2. 方案：使用cover-view覆盖canvas层级。结果：失败。
3. 方案：使用canvasToTempFilePath获取canvas内容，绘制图片。结果：成功。

canvasToTempFilePath方案

canvasToTempFilePath 微信文档

const {
	pixelRatio
} = Taro.getSystemInfoSync();

wx.canvasToTempFilePath({
	x: 0,
	y: 0,
	// 画布区域的高宽
	width,
	height,
	// 生成图片的高宽 如果图片不清晰 需要增加pixelRatio
	destWidth: width * pixelRatio,
	destHeight: height * pixelRatio,
	// 当前canvasid
	canvasId: id,
	// 导出图片类型
	fileType: 'jpg',
	// 如果当前canvas的type='2d' 需要指定当前canvas元素
	// node可以通过 wx.createSelectorQuery
	canvas: node,
	success(imgRes: any) {
		// 生成图片
		console.log('imgRes.tempFilePath', imgRes.tempFilePath);
    },
	fail(error: any) {
		console.log(error);
	}
});

页面渲染的Canvas元素

<Canvas
	type="2d"
	id={id}
	canvasId={id}
/>

最后拿到图片替代Canvas进行展示即可。