解决base64与图片互转时背景颜色的问题，实测可用！！！

项目背景

先说一下我的项目需求，需要使用微信小程序的手写签字，后台使用的是springmarker解析ftl生成word文档，涉及到双方签字，所以需要将第一步签的字以图片的形式保存到服务器上，在另一方签字的时候，再将此图片读取为base64，重新生成word。

问题描述

1. canvas背景设置问题
   问题就是出在保存为图片的时候，png图片的背景变黑了，导致重新生成的合同中，签字处的背景颜色也是黑色的，看图：
   

2. 图片格式不一致问题
   通过设置canvas解决了问题1描述的情况，但是在生成合同的时候，又发现了新的问题，项目背景中提到了，在另一方签字的时候，需要获取第一步签字的图片，解析成base64，重新生成合同，问题的结果就是在生成的第一步的签名处，背景色不是白色，而是别的颜色。图：
   

解决方案

1. 解决第一个问题，参考https://blog.csdn.net/sinat_17775997/article/details/58708042，我采用的是第二种方式，设置context即可：

const ctx = canvas.getContext('2d');
// 在canvas绘制前填充白色背景
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);

2. 解决第二个问题，是因为原图片格式与转换位base64时设置的格式不一致导致的，原图片格式是pnd，而我代码中写的是：jpeg，所以，设置图片格式前后一致就正常了：