一、将canvas画布生成图片
获取canvas，通过canvas.toDataURL('image/png', 1)直接可以将画布转换成base64图片
二、canvas书写的时候是一个颜色，书写完生成图片的时候，图片中的文本字体变成另一个颜色，如何处理？
可以通过设置canvas.getContext('2d').globalCompositeOperation的值来实现
具体方法如下：
书写中画布的文本颜色设置：
this.canvas = canvas; this.context = canvas.getContext('2d'); context.strokeStyle = '#F2D49F';
生成图片之前通过canvas.getContext('2d').globalCompositeOperation = "source-in" 来改变颜色(https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)
async getPNGImage(canvas = this.canvas) { const w = canvas.width; const h = canvas.height; let ctx = canvas.getContext('2d'); // 设置canvas生成的图片中文本的颜色 ctx.globalCompositeOperation = 'source-in'; ctx.fillStyle = "#0710B2"; ctx.fillRect(0, 0, w, h); // 签名生成图片后颜色恢复到原始颜色，画布中颜色不变 setTimeout(() => { ctx.globalCompositeOperation = 'source-in'; ctx.fillStyle = "#F2D49F"; ctx.fillRect(0, 0, w, h); }) return canvas.toDataURL('image/png', 1) }
通过以上的操作可以实现的是：
比如有一个canvas画布，书写的时候，字体颜色设置成白色，这时候canvas画布上都是白色的字体，然后需要将canvas画布书写的内容生成一张透明的png图片，这张图片因为要放到其他地方去展示，所以可能需要改一下图片上的文字颜色。所以就用到了我们的globalCompositeOperation，需要手动设置。在生成图片之前设置一下，生成的图片就会是我们上面预期的效果
