Background of the project
Let me talk about my project requirements first. I need to use the handwritten signature of the WeChat applet. The background uses springmarker to parse ftl to generate a word document, which involves signatures from both parties, so I need to save the signed words in the first step to the server in the form of pictures. , when the other party signs, read the picture as base64 and regenerate the word.
Problem Description
-
Canvas background setting problem
The problem is that when saving as a picture, the background of the png picture turns black, resulting in the regenerated contract, the background color of the signature is also black, see the picture:
-
The problem of image format inconsistency is
solved by setting the canvas to solve the situation described in problem 1, but when generating the contract, a new problem is discovered. It is mentioned in the project background that when the other party signs, it is necessary to obtain the image of the first step of signing. , parse it into base64, and regenerate the contract. The result of the problem is that at the signature of the first step of generation, the background color is not white, but another color. picture:
solution
- To solve the first problem, refer to https://blog.csdn.net/sinat_17775997/article/details/58708042. I use the second method, just set the context:
const ctx = canvas.getContext('2d');
// 在canvas绘制前填充白色背景
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
- The second problem is solved because the original image format is inconsistent with the format set when converting to base64. The original image format is pnd, and my code writes: jpeg. Therefore, it is normal to set the image format to be consistent before and after:
