uniapp在canvas上绘制文本并进行预览

1. 调用uni.canvasTotempFilePath(Object , component) API生成图片地址

把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 <canvas> 组件。

2.uni.previewImage（）预览图片

<template>
	<view >
		<canvas class="mycanvas" canvas-id="mycanvas"></canvas>
		<button type="primary" @click="previewCanvasImg">预览</button>
	</view>
	
</template>


<script>
    export default{
         methods:{
             //绘制文本
             drawName(name) {
				const dom = document.querySelector('.mycanvas')
				let context = uni.createCanvasContext('mycanvas')
				context.setFillStyle('#ebecf0') //文字颜色：默认黑色
				context.textAlign = 'center'
				context.textBaseline = "middle";
				context.font = 'normal 20px 微软雅黑'; // 字体样式
				context.fillText(name, dom.clientWidth / 2, dom.clientHeight / 2);

				context.draw()

				var that = this
				//生成base64格式图片		
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					fileType: 'jpg',
					quality: 1, //图片质量
					success(res) {
						console.log(res.tempFilePath)
					}
				})
			},
            // 预览
			previewCanvasImg() {
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					fileType: 'jpg',
					quality: 1, //图片质量
					success(res) {
						console.log(res.tempFilePath, 'canvas生成图片地址');
						uni.previewImage({
							urls: [res.tempFilePath] //预览图片 数组
						});
					}
				})
				},                
                
         }
       }
</script>